Scrollspyä käytetään navigointiluettelon linkkien automaattiseen päivittämiseen vierityksen sijainnin perusteella.
Seuraava esimerkki näyttää kuinka luodaan scrollspy:
<!-- 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>Kokeile itse →
<!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>
Lisää data-bs-spy="scroll" elementtiin, jota tulee käyttää vieritettävänä alueena (usein tämä on <body>-elementti).
Lisää sitten data-bs-target-attribuutti id-arvon tai navigointipalkin luokan nimen kanssa (.navbar ). Tällä varmistetaan, että navigointipalkki on yhdistetty vieritettävään alueeseen.
Huomaa, että vieritettävien elementtien on vastattava navigointipalkin luettelokohteiden sisällä olevien linkkien tunnusta (<div id="section1"> vastaa <a href="#section1">).
Valinnainen attribuutti data-bs-offset määrittää pikselien määrän, jotka siirretään ylhäältä, kun lasketaan vierityksen sijaintia. Tästä on hyötyä, kun sinusta tuntuu, että navigointipalkin sisällä olevat linkit muuttavat aktiivista tilaa liian aikaisin tai liian aikaisin, kun siirryt vieritettävään elementtiin. Oletusarvo on 10 pikseliä.
Edellyttää suhteellista sijoittelua: Data-bs-spy="scroll"-elementti vaatii CSS-ominaisuuden position, jonka arvo on "relative", jotta se toimii oikein.