آموزش کار با پلاگین Scrollspy در بوت استرپReviewed by صابر بوستانی on Nov 23Rating: 3.0
آموزش کار با پلاگین Scrollspy در بوت استرپ

آموزش کار با پلاگین Scrollspy در بوت استرپ

باسلام. توی این مطلب در خدمتتون هستیم با آموزش کار با پلاگین Scrollspy در بوت استرپ. این پلاگین بر اساس موقعیت Scroll به طور خودکار لینک های مربوط به هر بخش را در یک navigation به روز رسانی می کند.

آموزش کار با پلاگین Scrollspy در بوت استرپ در ادامه مطلب، لطفا با ما همراه باشید…

آموزش کار با پلاگین Scrollspy در بوت استرپ

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

 

نحوه ساخت Scrollspy

مثال زیر نحوه ساخت Scrollspy را نشان می دهد.

مشاهده مثال دیگر به همراه دمو

توضیح مثال قبل :

کلاس data-spy=”scroll” را به عنصری که باید به عنوان منطقه قابل پیمایش (scrollable) استفاده شود ، اضافه کنید . ( معولا این عنصر <body> می باشد ) سپس خاصیت data-target را با مقداری به میزان ID یا نام کلاس نوار مسیریابی اضافه کنید. این کار به منظوراطمینان حاصل کردن از اتصال navbar به منطقه قابل پیمایش استفاده میشود.

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

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

نیازمند موقعیت دهی نسبی ست : عنصر حاوی data-spy=”scroll” نیازمند موقعیت درست CSS با مقدار “relative” تا درست کار کند.

 

منوی عمودی Scrollspy

در این مثال ، از پیل های عمودی مسیریابی (navigation)  بوت استرپ به عنوان منو استفاده میکنیم

مشاهده مثال دیگر به همراه دمو