Το Scrollspy χρησιμοποιείται για την αυτόματη ενημέρωση συνδέσμων σε μια λίστα πλοήγησης με βάση τη θέση κύλισης.
Το ακόλουθο παράδειγμα δείχνει πώς να δημιουργήσετε ένα 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>Δοκιμάστε το μόνοι σας →
<!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>
Προσθέστε data-bs-spy="scroll" στο στοιχείο που πρέπει να χρησιμοποιηθεί ως περιοχή κύλισης (συχνά αυτό είναι το στοιχείο <body>).
Στη συνέχεια, προσθέστε το χαρακτηριστικό data-bs-target με την τιμή του αναγνωριστικού ή του ονόματος της κλάσης της γραμμής πλοήγησης (.navbar ). Αυτό γίνεται για να βεβαιωθείτε ότι η γραμμή πλοήγησης είναι συνδεδεμένη με την περιοχή με δυνατότητα κύλισης.
Λάβετε υπόψη ότι τα στοιχεία με δυνατότητα κύλισης πρέπει να ταιριάζουν με το αναγνωριστικό των συνδέσμων μέσα στα στοιχεία της λίστας της γραμμής πλοήγησης (<div id="section1"> αντιστοιχεί στο <a href="#section1">).
Το προαιρετικό χαρακτηριστικό data-bs-offset καθορίζει τον αριθμό των εικονοστοιχείων προς μετατόπιση από την κορυφή κατά τον υπολογισμό της θέσης κύλισης. Αυτό είναι χρήσιμο όταν αισθάνεστε ότι οι σύνδεσμοι μέσα στη γραμμή πλοήγησης αλλάζουν την ενεργή κατάσταση πολύ σύντομα ή πολύ νωρίς όταν μεταβείτε στα στοιχεία με δυνατότητα κύλισης. Η προεπιλογή είναι 10 pixel.
Απαιτεί σχετική τοποθέτηση: Το στοιχείο με data-bs-spy="scroll" απαιτεί την ιδιότητα position CSS, με τιμή "σχετικό" για να λειτουργήσει σωστά.