در خدمت شما هستیم با آموزش Bootstrap 4 جلسه بیست و هشتم (ScrollSpy)
آموزش Bootstrap 4 جلسه بیست و هشتم (ScrollSpy) از سری آموزش های تک قسمتی است.
اسکرول اسپای چیست؟
برای آن دسته از دوستانی که با اصطلاح اسکرول اسپای (ScrollSpy) آشنایی ندارند باید بگوییم که این حالت بیشتر به کار سایت های تک صفحه ای که جنبه معرفی دارند می آید به این صورت که منو های بالا صفحه جدیدی را باز نمیکنند و فقط در همان صفحه به سراغ بخشی که به منو مد نظر اختصاص داده شده است میروند یعنی به عنوان مثال گزینه منویی با نام درباره ما دارید و وقتی روی آن کلیک میشود در همان صفحه به قسمتی میرود که شما درباره ما را توضیح داده اید.
ساخت اسکرول اسپای
حال که با اسکرول اسپای آشنا شدید وقت آن رسیده است که نحوه ساخت آن را نیز یاد بگیرید برای ساخت اسکرول اسپای ازآنجایی که به کل صفحه ارتباط دارد باید attribute هایی برای body تعریف کنیم . باید attribute با نام data-spy و با مقدار scroll به body بدهیم . همچنین به attribute با نام data-target نیاز داریم که کلاس منو خود را به آن میدهیم بعد از این مورد نوبت به آن میرسد که مشخص کنیم هر منو دقیقا باید کدام قسمت از صفحه را باز کند کافیست در قسمتی که میخواهیم به منو های خود لینک دهیم مقدار href را برابر با class یا id بخش مد نظر قرار دهیم.
به عنوان مثال اگر منو درباره ما داریم و div با کلاس about داریم که درباره ما داخل آن قرار دارد باید به href منو خود مقدار about. را اختصاص دهیم برای واضح شدن موضوع میتوانید از کد زیر که برای شما قرار داده ایم استفاده کنید
برای راحتی شما عزیزان کدی شامل کل آموزش برای شما قرار میدهیم:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
body {
position: relative;
}
ul.nav-pills {
top: 20px;
position: fixed;
}
div.col-8 div {
height: 500px;
}
</style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#section1">Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">Section 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section3">Section 3</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Section 4
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#section41">Link 1</a>
<a class="dropdown-item" href="#section42">Link 2</a>
</div>
</li>
</ul>
</nav>
<div id="section1" class="container-fluid bg-success" style="padding-top:70px;padding-bottom:70px">
<h1>Section 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section2" class="container-fluid bg-warning" style="padding-top:70px;padding-bottom:70px">
<h1>Section 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section3" class="container-fluid bg-secondary" style="padding-top:70px;padding-bottom:70px">
<h1>Section 3</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section41" class="container-fluid bg-danger" style="padding-top:70px;padding-bottom:70px">
<h1>Section 4 Submenu 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section42" class="container-fluid bg-info" style="padding-top:70px;padding-bottom:70px">
<h1>Section 4 Submenu 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
</body>
----------------------------------------------------------------------------
<body data-spy="scroll" data-target="#myScrollspy" data-offset="1">
<div class="container-fluid">
<div class="row">
<nav class="col-sm-3 col-4" id="myScrollspy">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#section1">Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">Section 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section3">Section 3</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Section 4</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#section41">Link 1</a>
<a class="dropdown-item" href="#section42">Link 2</a>
</div>
</li>
</ul>
</nav>
<div class="col-sm-9 col-8">
<div id="section1" class="bg-success">
<h1>Section 1</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
<div id="section2" class="bg-warning">
<h1>Section 2</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
<div id="section3" class="bg-secondary">
<h1>Section 3</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
<div id="section41" class="bg-danger">
<h1>Section 4-1</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
<div id="section42" class="bg-info">
<h1>Section 4-2</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
</div>
</div>
</div>
</body>
----------------------------------------------------------------------------
<br>
</html>
می توانید دیگر قسمت ها را در لینک زیر ببینید:
آموزش Bootstrap 4 جلسه بیست و هفتم (popover)
شما میتوانید ویدیو این آموزش را به صورت آنلاین ببینید:
آموزش Bootstrap 4 جلسه اول (معرفی)
بسیار عالی ممنون ازتون مثل همیشه فوق العاده
نظر لطفتونه
خدا خیرتون بده که رایگان میذارید
لطف دارین وظیفس
eshghi mihandes saadi
سلامت باشین