Bootstrap Scrollspy Plugin (متقدم)
البرنامج المساعد 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-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>
شرح المثال
أضف data-spy="scroll"إلى العنصر الذي يجب استخدامه كمنطقة قابلة للتمرير (غالبًا ما يكون هذا هو <body>العنصر).
ثم أضف data-targetالسمة بقيمة المعرف أو اسم فئة شريط التنقل ( .navbar). هذا للتأكد من أن شريط التنقل متصل بالمنطقة القابلة للتمرير.
لاحظ أن العناصر القابلة للتمرير يجب أن تتطابق مع معرف الروابط داخل عناصر قائمة شريط التنقل ( <div id="section1">التطابقات <a href="#section1">).
تحدد السمة الاختيارية data-offsetعدد وحدات البكسل لإزاحتها من الأعلى عند حساب موضع التمرير. يكون هذا مفيدًا عندما تشعر أن الروابط الموجودة داخل شريط التنقل تغير الحالة النشطة في وقت قريب جدًا أو مبكرًا جدًا عند القفز إلى العناصر القابلة للتمرير. الافتراضي هو 10 بكسل.
يتطلب تحديد موضع نسبي: يتطلب العنصر الذي يحتوي على بيانات تجسس = "التمرير" خاصية موضع CSS ، مع قيمة "نسبي" للعمل بشكل صحيح.
القائمة العمودية Scrollspy
في هذا المثال ، نستخدم أقراص التنقل العمودية الخاصة بـ Bootstrap كقائمة:
مثال
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
<div class="container">
<div class="row">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills nav-stacked">
<li><a href="#section1">Section 1</a></li>
...
</ul>
</nav>
<div class="col-sm-9">
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at the navigation list while scrolling!</p>
</div>
...
</div>
</div>
</div>
</body>
إكمال مرجع Bootstrap Scrollspy
للحصول على مرجع كامل لجميع أساليب وأحداث التمرير ، انتقل إلى مرجع Bootstrap JS Scrollspy .