Scrollspy του Bootstrap 5

Το Scrollspy

Το Scrollspy χρησιμοποιείται για ναΚύλισηΗ τοποθεσία ανανεώνεται αυτόματα οι σύνδεσμοι στη λίστα οδηγιών πλοήγησης.

Πώς να δημιουργήσετε ένα Scrollspy

Το παρακάτω παράδειγμα δείχνει πώς να δημιουργήσετε ένα Scrollspy:

Παράδειγμα

<!-- Περιοχή κύλισης -->
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">
<!-- Μενού κύλισης - Οι στοιχεία <a> χρησιμοποιούνται για να μεταβούν σε κάποιο τμήμα της περιοχής που κύλιται -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
  <ul class="navbar-nav">
    <li><a href="#section1">Τμήμα 1</a></li>
    ...
</nav>
<!-- Τμήμα 1 -->
<div id="section1">
  <h1>Τμήμα 1</h1>
  <p>Προσπαθήστε να κύλите αυτή τη σελίδα και δείτε το μενού κύλισης ενώ κύλите!</p>
</div>
...
</body>

δοκιμάστε προσωπικά

παράδειγμα εξήγησης

το data-bs-spy="scroll" προσθέστε στο στοιχείο που χρησιμοποιείται ως περιοχή κύλισης (συνήθως <body> στοιχεία).

τότε προσθέστε data-bs-target ιδιότητας, η τιμή της οποίας είναι id ή η κλάση του μενού κύλισης (.navbar) για να διασφαλιστεί ότι το μενού κύλισης είναι συνδεδεμένο με την περιοχή που κύλιται.

Παρακαλώ σημειώστε ότι τα στοιχεία που κύλουν πρέπει να ταιριάζουν με το ID του σύνδεσμου στο μενού κύλισης (<div id="section1"> Συμβατότητα <a href="#section1">)

Οπション data-bs-offset Η ιδιότητα καθορίζει τον αριθμό των pixel που αποκλινούνται από την κορυφή κατά την υπολογισμό της θέσης κύλισης. Είναι χρήσιμο όταν οι σύνδεσμοι του μενού κινήσεων μεταβαίνουν σε στοιχεία που κύλουν, αν αισθάνεστε ότι αλλάζουν πολύ γρήγορα την κατάσταση ενεργού. Η προεπιλεγμένη τιμή είναι 10 pixel.

Χρειάζεται σχετική τοποθέτησηΤα στοιχεία που έχουν το data-bs-spy="scroll" χρειάζονται CSS Θέση Η τιμή της ιδιότητας πρέπει να είναι "relative" για να λειτουργεί σωστά.