Bootstrap JS Scrollspy
JS Scrollspy (scrollspy.js)
يتم استخدام البرنامج المساعد Scrollspy لتحديث الروابط تلقائيًا في قائمة التنقل بناءً على موضع التمرير.
للحصول على برنامج تعليمي حول Scrollspy ، اقرأ البرنامج التعليمي Bootstrap Scrollspy .
نصيحة: غالبًا ما يتم استخدام المكون الإضافي Scrollspy مع المكون الإضافي Affix .
عبر 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-inverse navbar-fixed-top">
...
<ul class="nav
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>
عبر 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 | Try it |
|---|---|---|
| .scrollspy("refresh") | When adding and removing elements from the scrollspy, this method can be used to refresh the document |
أحداث Scrollspy
يسرد الجدول التالي جميع أحداث scrollspy المتاحة.
| Event | Description | Try it |
|---|---|---|
| activate.bs.scrollspy | Occurs when a new item becomes activated by the scrollspy |
مزيد من الأمثلة
Scrollspy مع التمرير المتحرك
كيفية إضافة تمرير صفحة ناعمة إلى نقطة ارتساء في نفس الصفحة:
التمرير السلس
// Add scrollspy to <body>
$('body').scrollspy({target: ".navbar", offset: 50});
// Add smooth scrolling on all links inside the navbar
$("#myNavbar a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
Scrollspy & Affix
استخدام ملحق Affix مع البرنامج المساعد Scrollspy:
قائمة أفقية (Navbar)
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body>
القائمة العمودية (Sidenav)
<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
...
</nav>
</body>