Scrollspy, kaydırma konumuna göre bir gezinme listesindeki bağlantıları otomatik olarak güncellemek için kullanılır.
Aşağıdaki örnekte bir kaydırma casusunun nasıl oluşturulacağı gösterilmektedir:
<!-- The scrollable area -->
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-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>Kendiniz Deneyin →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<style>
body {
position: relative;
}
</style>
</head>
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#section1">Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">Section 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section3">Section 3</a>
</li>
</ul>
</div>
</nav>
<div id="section1" class="container-fluid bg-success text-white" style="padding:100px 20px;">
<h1>Section 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section2" class="container-fluid bg-warning" style="padding:100px 20px;">
<h1>Section 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section3" class="container-fluid bg-secondary text-white" style="padding:100px 20px;">
<h1>Section 3</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
</body>
</html>
Kaydırılabilir alan olarak kullanılması gereken öğeye data-bs-spy="scroll" ekleyin (genellikle bu 'dir) <body> öğesi).
Ardından data-bs-target özelliğini, kimlik değerini veya gezinme çubuğunun sınıf adını (.navbar) içeren şekilde ekleyin. ). Bunun amacı gezinme çubuğunun kaydırılabilir alanla bağlantılı olduğundan emin olmaktır.
Kaydırılabilir öğelerin gezinme çubuğunun liste öğeleri içindeki bağlantıların kimlikleriyle eşleşmesi gerektiğini unutmayın (<div id="section1">, ile eşleşir <a href="#section1">).
İsteğe bağlı data-bs-offset özelliği, kaydırma konumu hesaplanırken üstten kaydırılacak piksel sayısını belirtir. Bu, kaydırılabilir öğelere atlarken gezinme çubuğu içindeki bağlantıların 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-bs-spy="scroll" içeren öğenin düzgün çalışması için "relative" değerine sahip CSS position özelliği gerekir.