JS Scrollspy (scrollspy.js)
Scrollspy eklentisi otomatik kaydırma konumuna dayalı bir gezinme listesinde bağlantıları güncelleştirmek için kullanılır.
Scrollspy hakkında bir eğitim için bizim okumak Önyükleme Scrollspy Eğitimi .
İpucu: Scrollspy eklentisi genellikle ile birlikte kullanılır Ekler eklentisi.
Via data-* Özellikler
Ekle data-spy="scroll" kaydırılabilir alanı olarak kullanılması gereken elemana (often this is the <body> element) .
Sonra eklemek data-target kimliği değerine veya navigasyon çubuğunun sınıf adıyla niteliğini ( .navbar ) . Bu emin olmaktır navbar kaydırılabilir alana bağlıdır.
Kaydırılabilir elemanlar navbar en liste öğelerinin iç bağlantıların kimliğini eşleşmesi gerektiğini unutmayın ( <div id="section1"> matches <a href="#section1"> ) .
İsteğe bağlı data-offset özelliği kaydırma konumu hesaplanırken üstten dengelemek için piksel sayısını belirtir. Eğer kaydırılabilir elemanlar atlarken gezinme çubuğu içindeki bağlantıları çok erken çok erken aktif durumunu değiştirir ya da hissettiklerinde yararlıdır. Standart 10 pikseldir.
Görece konumlandırılmasını gerektirir: ile elemanının data-spy="scroll" CSS gerektiren position değeriyle, özelliği "relative" doğru çalışması.
Örnek
<!-- 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>
Kendin dene " JavaScript aracılığıyla
el ile etkinleştirme:
Scrollspy Seçenekler
Seçenekler Veri özellikleri veya JavaScript aracılığıyla geçirilebilir. veri özelliklerini için, olduğu gibi, veriye seçeneği adını ekler = "" data-ofset.
| isim | tip | Varsayılan | Açıklama | Dene |
|---|---|---|---|---|
| offset | number | 10 | kaydırma konumu hesaplanırken üstten dengelemek için piksel sayısını belirtir | Dene |
Scrollspy Yöntemleri
Aşağıdaki tabloda tüm mevcut scrollspy yöntemleri.
| Yöntem | Açıklama | Dene |
|---|---|---|
| . scrollspy("refresh") | ekleme ve scrollspy elemanları çıkarırken, bu yöntem, bir belge yenilemek için kullanılabilmektedir | Dene |
Scrollspy Olaylar
Aşağıdaki tabloda mevcut tüm scrollspy olayları listeler.
| Olay | Açıklama | Dene |
|---|---|---|
| activate.bs.scrollspy | Yeni bir öğe scrollspy tarafından aktif hale meydana | Dene |
Örnekler
animasyonlu kaydırma ile Scrollspy
Nasıl aynı sayfada çapa yumuşak bir sayfa kaydırma eklemek için:
Kesintisiz kaydırma
// 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;
});
}); Kendin dene " Scrollspy & Ekler
Kullanılması yapıştırmayın Scrollspy eklenti ile birlikte eklentisi:
Yatay Menü (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> Kendin dene " Dikey Menü (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> Kendin dene "