Bootstrap 4 Scrollspy (متقدم)
Bootstrap 4 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-expand-sm bg-dark navbar-dark fixed-top">
...
<ul class="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="1">
<div class="container-fluid">
<div class="row">
<nav class="col-sm-3
col-4" id="myScrollspy">
<ul class="nav nav-pills
flex-column">
<li class="nav-item">
<a class="nav-link active" href="#section1">Section 1</a>
</li>
...
</ul>
</nav>
<div class="col-sm-9
col-8">
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at the
menu while scrolling!</p>
</div>
...
</div>
</div>
</div>
</body>
إكمال مرجع Bootstrap Scrollspy
للحصول على مرجع كامل لجميع خيارات التمرير والأساليب والأحداث ، انتقل إلى مرجع Bootstrap JS Scrollspy .