Önyükleme JS Scrollspy
JS kaydırma casusu
Scrollspy, gezinme listesindeki bağlantıları kaydırma konumuna göre otomatik olarak güncellemek için kullanılır.
Scrollspy hakkında bir eğitim için Bootstrap Scrollspy Eğitimimizi okuyun .
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-expand-sm bg-dark navbar-dark fixed-top">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#section1">Section 1</a>
</li>
....
</ul>
</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 |
|---|---|
| .scrollspy("refresh") | When adding and removing elements from the scrollspy, this method can be used to refresh the document |
| .scrollspy("dispose") | Destroys the scrollspy |
Scrollspy Etkinlikleri
Aşağıdaki tablo, mevcut tüm scrollspy olaylarını listeler.
| Event | Description |
|---|---|
| activate.bs.scrollspy | Occurs when a new item becomes activated by the scrollspy |