Scrollspy Eklentisi
Scrollspy eklentisi otomatik kaydırma konumuna dayalı bir gezinme listesinde bağlantıları güncelleştirmek için kullanılır.
Bir Scrollspy Nasıl oluşturun
Aşağıdaki örnek, bir scrollspy nasıl oluşturulacağı gösterilmektedir:
Ö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 " Örnek Açıklaması
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 navbar kaydırılabilir alana sahip bağlı olduğundan emin olmaktı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ı.
Scrollspy Dikey Menü
Bu örnekte, menü olarak Bootstrap dikey navigasyon hapları kullanın:
Örnek
<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> Kendin dene " Tamamlayın Bootstrap Scrollspy Referansı
Tüm scrollspy yöntemler ve olaylar tam bir referans için lütfen gidin Bootstrap JS Scrollspy Referans .