Bootstrap JS Scrollspy
شبيبة Scrollspy
يستخدم Scrollspy لتحديث الروابط تلقائيًا في قائمة التنقل بناءً على موضع التمرير.
للحصول على برنامج تعليمي حول Scrollspy ، اقرأ البرنامج التعليمي Bootstrap Scrollspy .
عبر data- * السمات
أضف data-spy="scroll"إلى العنصر الذي يجب استخدامه كمنطقة قابلة للتمرير (غالبًا ما يكون هذا هو <body>العنصر).
ثم أضف data-targetالسمة بقيمة المعرف أو اسم فئة شريط التنقل ( .navbar). هذا للتأكد من أن شريط التنقل متصل بالمنطقة القابلة للتمرير.
لاحظ أن العناصر القابلة للتمرير يجب أن تتطابق مع معرف الروابط داخل عناصر قائمة شريط التنقل ( <div id="section1">التطابقات <a href="#section1">).
تحدد السمة الاختيارية data-offsetعدد وحدات البكسل لإزاحتها من الأعلى عند حساب موضع التمرير. يكون هذا مفيدًا عندما تشعر أن الروابط الموجودة داخل شريط التنقل تغير الحالة النشطة في وقت قريب جدًا أو مبكرًا جدًا عند القفز إلى العناصر القابلة للتمرير. الافتراضي هو 10 بكسل.
يتطلب تحديد موضع نسبي: يتطلب العنصر الذي يحتوي على بيانات تجسس = "التمرير" خاصية موضع CSS ، مع قيمة "نسبي" للعمل بشكل صحيح.
مثال
<!-- 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 class="nav-item">
<a class="nav-link" href="#section1">Section 1</a>
</li>
....
</ul>
</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>
عبر JavaScript
التمكين يدويًا باستخدام:
مثال
$('body').scrollspy({target: ".navbar"})
خيارات Scrollspy
يمكن تمرير الخيارات عبر سمات البيانات أو JavaScript. لسمات البيانات ، قم بإلحاق اسم الخيار إلى data- ، كما في data-offset = "".
| Name | Type | Default | Description | Try it |
|---|---|---|---|---|
| offset | number | 10 | Specifies the number of pixels to offset from top when calculating the position of scroll |
طرق Scrollspy
يسرد الجدول التالي جميع طرق scrollspy المتاحة.
| Method | Description |
|---|---|
| .scrollspy("refresh") | When adding and removing elements from the scrollspy, this method can be used to refresh the document |
| .scrollspy("dispose") | Destroys the scrollspy |
أحداث Scrollspy
يسرد الجدول التالي جميع أحداث scrollspy المتاحة.
| Event | Description |
|---|---|
| activate.bs.scrollspy | Occurs when a new item becomes activated by the scrollspy |