Scrollspy در Bootstrap ورژن 4

Scrollspy به طور خودکار لینک ها را در یک لیست منو بر اساس موقعیت اسکرول بروزرسانی می کند.

چگونه Scrollspy ایجاد کنیم

مثال زیر نشان می دهد چگونه scrollspy ایجاد می شود:

ساخت Scrollspy
 <!-- The scrollable area -->
<body data-spy="scroll" data-target=".navbar" data-offset="50">

<!-- The navbar - The <a> elements are used to jump to a section in the scrollable area -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
  <ul class="navbar-nav">
    <li><a href="#section1">Section 1</a></li>
    ...
</nav>

<!-- Section 1 -->
<div id="section1">
  <h1>Section 1</h1>
  <p>Try to scroll this page and look at the navigation bar while scrolling!</p>
</div>
...

</body> 
مشاهده مثال

مثال توضیح داده شده

 data spy = "scroll" را به عنصری که باید به عنوان ناحیه رونده استفاده شود (اغلب این عنصر <body>) است اضافه کنید

سپس خصیصه data-target را با مقدار شناسه یا نام کلاس نوار منو  navbar اضافه کنید.

توجه داشته باشید که عناصر اسکرول دار باید با شناسه لینک های  موجود در لیست ها مطابقت داشته باشند " برابر="" <a="" href=""#section1">).

ویژگی اختیاری data-offset  مشخص کننده تعداد پیکسل ها است که در هنگام محاسبه موقعیت اسکرو از بازگشت به بالا استفاده می شود. برای این  است هنگامی که شما احساس می کنید که لینک در داخل نوار ناوبری تغییر حالت های فعال خیلی زود یا خیلی زود هنگام پریدن به عناصر رونده. پیش فرض 10 پیکسل است

نیاز به موقعیت نسبی: عنصر با data-spy = "scroll" نیاز به ویژگی position در CSS دارد، با مقدار "relative" به درستی کار می کند.

منوی عمودی Scrollspy

در این مثال، ما از pill  های ناوبری عمودی Bootstrap به عنوان منو استفاده می کنیم:

ساخت Scrollspy عمودی
 <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>
          ...
        </ul>
      </nav>
      <div class="col-sm-9 col-8">
        <div id="section1">
          <h1>Section 1</h1>
          <p>Try to scroll this page and look at the menu while scrolling!</p>
        </div>
        ...
      </div>
    </div>
  </div>

</body> 
مشاهده مثال

 

نظر شما

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران بپیوندید

   
   
عضویت
پیام تستی برای گروه نرم افزاری وب مهراز