پرنیان طرح | انجام امور پرداختی و مجازی | فایل های گرافیکی | پرداخت های بین المللی
نویسنده: بهاره حسنی 
Scrollspy ها لینک های پرشی هستند که با کلیک روی لینک ها محتوای مربوط به آن لینک را نمایش میدهند.
در صفحه با کلیک روی لینک ها به محتوای آن نقطه مورد نظر پرش میکند.
در بوت استرپ ۴ انواع کلاس های اماده ی Scrollspy ها (لینک های پرشی) وجود دارد که برایتان با ذکر مثال توضیح داده ایم.
با عرض سلام و وقت بخیر خدمت شما همراهان عزیز وب سایت پرنیان طرح
در این مبحث با آموزش Scrollspy ها (لینک های پرشی) در بوت استرپ ۴ همراه شما هستیم.
Bootstrap 4 Scrollspy
Scrollspy ها برای بروز رسانی خودکار پیوندها در یک لیست پیمایش بر اساس موقعیت پیمایش استفاده میشود.
چگونه یک scrollspy ایجاد کنیم ؟
مثال زیر به شما نشان میدهد که چگونه یک scrollspy ایجاد کنید.
۱- ویژگی “data-spy=”scroll را به المانی که میخواهید از آن به عنوان محدوده ی scrollspy استفاده کنید ، بیافزایید که این المان معمولا عنصر body است.
۲- سپس ویژگی data-target را با یک مقدار از id یا class با نام navbar. را به آن اضافه کنید.
این برای اطمینان از اتصال navbar به منطقه scrollable است.
۳- توجه داشته باشید که عناصر scrollable باید با id لینک های موجود در موارد لیست فهرست navbar’s مطاقبت داشته باشند.
مثلا : <“div id=”section1> با <“a href=”#section1> مطاقبت دارد.
۴- ویژگی اختیاری data-offset تعداد پیکسل ها را برای ایجاد فاصله از بالا هنگام محاسبه موقعیت scroll مشخص میکند.
این کار زمانی کاربرد دارد که احساس میکنید لینک های درون navbar زمان حالت فعال بودن خود را در هنگام پرش به عناصر scroll خیلی زود از دست میدهند.
مقدار پیش فرض برای آن ۱۰ پیکسل میباشد.
مثال :
[php]
<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 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=”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>
…
</body>
[/php]
خروجی کدهای مثال بالا :
منوی عمودی scrollspy :
در این مثال از منوهای عمودی vertical navigations در بوت استرپ استفاده میکنیم.
مثال :
مقادیر بخش style
[php]
<style>
body {
position: relative;
}
ul.nav-pills {
top: 20px;
position: fixed;
}
div.col-8 div {
height: 500px;
}
</style>
[/php]
کدهای داخل تگ body
[php]
<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 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=”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>
</body>
[/php]
تصویر خروجی کدهای مثال بالا :
