Önyükleme JS Scrollspy
JS Scrollspy (scrollspy.js)
Scrollspy eklentisi, kaydırma konumuna göre bir gezinme listesindeki bağlantıları otomatik olarak güncellemek için kullanılır.
Scrollspy hakkında bir eğitim için Bootstrap Scrollspy Eğitimimizi okuyun .
İpucu: Scrollspy eklentisi genellikle Affix eklentisi ile birlikte kullanılır .
Veri-* Öznitelikler aracılığıyla
data-spy="scroll"Kaydırılabilir alan olarak kullanılması gereken öğeye ekleyin (genellikle bu <body>öğedir).
Ardından , gezinme çubuğunun ( ) data-targetkimliğinin veya sınıf adının bir değeriyle özniteliği ekleyin. .navbarBu, gezinme çubuğunun kaydırılabilir alana bağlı olduğundan emin olmak içindir.
Kaydırılabilir öğelerin, gezinme çubuğunun liste öğeleri içindeki bağlantıların kimliğiyle eşleşmesi gerektiğini unutmayın ( <div id="section1">eşleşir <a href="#section1">).
İsteğe bağlı data-offsetöznitelik, kaydırma konumu hesaplanırken üstten kaydırılacak piksel sayısını belirtir. Bu, gezinme çubuğu içindeki bağlantıların, kaydırılabilir öğelere atlarken etkin durumu çok erken veya çok erken değiştirdiğini hissettiğinizde kullanışlıdır. Varsayılan 10 pikseldir.
Göreceli konumlandırma gerektirir: data-spy="scroll" içeren öğenin düzgün çalışması için "göreli" değerine sahip CSS konum özelliği gerekir.
Ö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>
JavaScript aracılığıyla
Şunlarla manuel olarak etkinleştirin:
Örnek
$('body').scrollspy({target: ".navbar"})
Scrollspy Seçenekleri
Seçenekler, veri öznitelikleri veya JavaScript aracılığıyla iletilebilir. Veri öznitelikleri için, data-offset="" gibi seçenek adını data-'ya ekleyin.
| Name | Type | Default | Description | Try it |
|---|---|---|---|---|
| offset | number | 10 | Specifies the number of pixels to offset from top when calculating the position of scroll |
Scrollspy Yöntemleri
Aşağıdaki tablo, mevcut tüm scrollspy yöntemlerini listeler.
| Method | Description | Try it |
|---|---|---|
| .scrollspy("refresh") | When adding and removing elements from the scrollspy, this method can be used to refresh the document |
Scrollspy Etkinlikleri
Aşağıdaki tablo, mevcut tüm scrollspy olaylarını listeler.
| Event | Description | Try it |
|---|---|---|
| activate.bs.scrollspy | Occurs when a new item becomes activated by the scrollspy |
Daha fazla örnek
Animasyonlu kaydırma ile Scrollspy
Aynı sayfadaki bir bağlantıya düzgün bir sayfa kaydırma nasıl eklenir:
Pürüzsüz kaydırma
// Add scrollspy to <body>
$('body').scrollspy({target: ".navbar", offset: 50});
// Add smooth scrolling on all links inside the navbar
$("#myNavbar a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// 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
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
Scrollspy ve Yapıştır
Affix eklentisini Scrollspy eklentisi ile birlikte kullanma :
Yatay Menü (Gezinme Çubuğu)
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body>
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>