Bootstrap 4 Scrollspy (Gelişmiş)
Önyükleme 4 Scrollspy
Scrollspy, gezinme listesindeki bağlantıları kaydırma konumuna göre otomatik olarak güncellemek için kullanılır.
Scrollspy Nasıl Oluşturulur
Aşağıdaki örnek, bir scrollspy'ın nasıl oluşturulacağını gösterir:
Ö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><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>
Örnek Açıklama
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.
Scrollspy Dikey Menü
Bu örnekte, menü olarak Bootstrap'in dikey gezinme haplarını kullanıyoruz:
Örnek
<body data-spy="scroll" data-target="#myScrollspy" data-offset="1">
<div class="container-fluid">
<div class="row">
<nav class="col-sm-3
col-4" id="myScrollspy">
<ul class="nav nav-pills
flex-column">
<li class="nav-item">
<a class="nav-link active" href="#section1">Section 1</a>
</li>
...
</ul>
</nav>
<div class="col-sm-9
col-8">
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at the
menu while scrolling!</p>
</div>
...
</div>
</div>
</div>
</body>
Bootstrap Scrollspy Referansını Tamamlayın
Tüm scrollspy seçeneklerinin, yöntemlerinin ve olaylarının eksiksiz bir referansı için Bootstrap JS Scrollspy Referansımıza gidin .