Scrollspy برای هدایت به بخش های مختلف در صفحه ساخته می شود. ، فهرست مطالبی که در زیر قرار میگیرد نمونه ای از Scrollspy است.

پیشنهاد می شود قبل از ورود به این بخش ، سایر بخش های دوره رایگان بوت استرپ را مطالعه فرمایید.

ساخت Scrollspy

قطعه کد زیر نمونه ای از یک Scrollspy را نشان می دهد:

 







  
Section 1
  
Try to scroll this page and look at the navigation bar while scrolling!

...

 

توضیحات مثال

با افزودن data-spy=”scroll” محدوده ی قابل اسکرول خود را مشخص کنید ، معمولا این ویژگی به تگ body افزوده می شود .

توجه داشته باشید که عناصر پیمایشی باید با شناسه پیوندهای موجود در داخل لیست های navbar مطابقت داشته باشند (< div id = ” section1 ” > با < a href=” #section1″ > مطابقت دارد).

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

منوی عمودی Scrollspy

 

  

    

      
      

        

          
Section 1
          
Try to scroll this page and look at the menu while scrolling!
        
        ...
      
    
  

 

پیشنهاد می شود برای مطالعه موارد بیشتر به سایت getbootstrap مراجعه فرمایید.