و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 ). هذا هو التأكد من أن نافبار يرتبط مع منطقة للتمرير.
لاحظ أن عناصر تمرير يجب أن تتطابق معرف الروابط داخل عناصر القائمة على navbar و( <div id="section1"> مباريات <a href="#section1"> ).
اختياري data-offset تحدد السمة عدد البكسل لتعويض من أعلى عند احتساب موقف التمرير. وهذا مفيد عندما تشعر أن الروابط داخل نافبار تتغير حالة نشطة قريبا جدا أو في وقت مبكر جدا عندما قفز إلى عناصر قابلة للتمرير. الافتراضي هو 10 بكسل.
يتطلب تحديد المواقع النسبية: العنصر مع data-spy="scroll" يتطلب CSS position الممتلكات، بقيمة "relative" للعمل بشكل صحيح.
القائمة Scrollspy عمودي
في هذا المثال، ونحن نستخدم حبوب الملاحة العمودية التمهيد باعتبارها القائمة:
مثال
<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 المرجعي
للإشارة كاملة لجميع الأساليب والأحداث scrollspy، انتقل إلى لدينا التمهيد شبيبة Scrollspy المرجعي .