شبيبة Scrollspy (scrollspy.js)
يتم استخدام البرنامج المساعد Scrollspy لتحديث الروابط في قائمة الملاحة القائمة على موقف التمرير تلقائيا.
لتعليمي حول Scrollspy، اقرأ التمهيد Scrollspy التعليمي .
نصيحة: وغالبا ما يستخدم المساعد Scrollspy جنبا إلى جنب مع يضعوا المساعد.
عبر data-* سمات
إضافة data-spy="scroll" إلى العنصر الذي يجب أن تستخدم المنطقة للتمرير (غالبا هذا هو <body> عنصر).
قم بإضافة data-target السمة بقيمة هوية أو اسم الفئة من شريط التنقل ( .navbar ). هذا هو التأكد من أن navbar يرتبط مع منطقة للتمرير.
لاحظ أن عناصر تمرير يجب أن تتطابق معرف الروابط داخل عناصر القائمة على navbar و( <div id="section1"> مباريات <a href="#section1"> ).
اختياري data-offset تحدد السمة عدد البكسل لتعويض من أعلى عند احتساب موقف التمرير. وهذا مفيد عندما تشعر أن الروابط داخل نافبار تتغير حالة نشطة قريبا جدا أو في وقت مبكر جدا عندما قفز إلى عناصر قابلة للتمرير. الافتراضي هو 10 بكسل.
يتطلب تحديد المواقع النسبية: العنصر مع data-spy="scroll" يتطلب CSS position الممتلكات، بقيمة "relative" للعمل بشكل صحيح.
مثال
<!-- 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>
انها محاولة لنفسك » عن طريق جافا سكريبت
تمكين يدويا مع:
خيارات Scrollspy
يمكن أن تنتقل عن طريق الخيارات سمات البيانات أو جافا سكريبت. لسمات البيانات، إلحاق اسم الخيار لبالبيانات، كما في بيانات تعويض = "".
| اسم | اكتب | افتراضي | وصف | جربها |
|---|---|---|---|---|
| offset | number | 10 | يحدد عدد من بكسل للتعويض من أعلى عند احتساب موقف التمرير | جربها |
طرق Scrollspy
يسرد الجدول التالي جميع طرق scrollspy المتاحة.
| طريقة | وصف | جربها |
|---|---|---|
| .scrollspy("refresh") | عند إضافة وإزالة عناصر من scrollspy، وهذه الطريقة يمكن أن تستخدم لتحديث وثيقة | جربها |
أحداث Scrollspy
يسرد الجدول التالي الأحداث scrollspy كل ما هو متاح.
| حدث | وصف | جربها |
|---|---|---|
| activate.bs.scrollspy | يحدث عندما يصبح عنصر جديد تفعيلها من خلال scrollspy | جربها |
أمثلة
Scrollspy مع التمرير المتحركة
كيفية إضافة التمرير السلس إلى الصفحة مرتكزا على نفس الصفحة:
التمرير السلس
// Add scrollspy to <body>
$('body').scrollspy({target: ".navbar",
offset: 50});
// Add smooth scrolling to all links inside a navbar
$("#myNavbar a").on('click', function(event){
//
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 (the speed of the animation)
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
}); انها محاولة لنفسك » Scrollspy ويضعوا
باستخدام يضعوا المساعد جنبا إلى جنب مع المساعد Scrollspy:
القائمة الأفقية (نافبار)
<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> انها محاولة لنفسك »