in English

Scrollspy

Αυτόματη ενημέρωση της πλοήγησης Bootstrap ή των στοιχείων ομάδας λίστας με βάση τη θέση κύλισης για να υποδείξει ποιος σύνδεσμος είναι ενεργός αυτήν τη στιγμή στη θύρα προβολής.

Πως δουλεύει

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

  • Εάν δημιουργείτε το JavaScript μας από την πηγή, απαιτείutil.js .
  • Πρέπει να χρησιμοποιείται σε ένα στοιχείο πλοήγησης Bootstrap ή μια ομάδα λίστας .
  • Το Scrollspy απαιτεί position: relative;το στοιχείο που κατασκοπεύετε, συνήθως το <body>.
  • Όταν κατασκοπεύετε στοιχεία εκτός από το <body>, φροντίστε να έχετε ένα heightσετ και να το overflow-y: scroll;εφαρμόσετε.
  • Απαιτούνται άγκυρες ( <a>) και πρέπει να δείχνουν σε ένα στοιχείο με αυτό id.

Όταν υλοποιηθεί επιτυχώς, η πλοήγησή σας ή η ομάδα λιστών θα ενημερωθεί αναλόγως, μετακινώντας την .activeτάξη από το ένα στοιχείο στο επόμενο με βάση τους συσχετισμένους στόχους τους.

Παράδειγμα στο navbar

Κάντε κύλιση στην περιοχή κάτω από τη γραμμή πλοήγησης και παρακολουθήστε την αλλαγή της ενεργής τάξης. Τα αναπτυσσόμενα στοιχεία θα επισημανθούν επίσης.

@Λίπος

Περιεχόμενο placeholder για το παράδειγμα scrollspy. Έχετε την καλύτερη αρχιτεκτονική. Σφραγίδες διαβατηρίου, είναι κοσμοπολίτισσα. Ωραία, φρέσκια, άγρια, το πήραμε στο λουκέτο. Ποτέ δεν είχα σχεδιάσει ότι μια μέρα θα σε έχανα. Σου τρώει την καρδιά. Το φιλί σου είναι κοσμικό, κάθε κίνηση είναι μαγική. Εννοώ αυτά, εννοώ σαν να είναι αυτή. Χαιρετίσματα αγαπημένοι ας κάνουμε ένα ταξίδι. Απλώς αποκτήστε τη νύχτα σαν την 4η Ιουλίου! Αλλά προτιμάς να σπαταληθείς.

@mdo

Περιεχόμενο placeholder για το παράδειγμα scrollspy. Γιατί είναι η μούσα και ο καλλιτέχνης. (Έτσι κάνουμε) Θέλετε λοιπόν να παίξετε με τη μαγεία. Οπότε να είσαι σίγουρος πριν μου τα δώσεις όλα. Περπατώ, περπατώ on air (απόψε). Παραλείψτε την ομιλία, τα ακούσατε όλα, ώρα να περπατήσετε.

ένας

Placeholder content for the scrollspy example. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

two

Placeholder content for the scrollspy example. It's time to bring out the big balloons. I'm walking, I'm walking on air (tonight). Yeah, we maxed our credit cards and got kicked out of the bar. Yo, shout out to all you kids, buying bottle service, with your rent money. I'm ma get your heart racing in my skin-tight jeans. If you get the chance you better keep her. Yo, shout out to all you kids, buying bottle service, with your rent money.

three

Περιεχόμενο placeholder για το παράδειγμα scrollspy. Αν θέλεις να χορέψεις, αν τα θέλεις όλα, ξέρεις ότι είμαι το κορίτσι που πρέπει να φωνάξεις. Θα περπατούσα μέσα στην καταιγίδα. Άσε με λοιπόν να σε πάρω με το κοστούμι γενεθλίων σου. Αυτός που ξέφυγε. Την περασμένη Παρασκευή το βράδυ, ναι, νομίζω ότι παραβιάσαμε το νόμο, λέτε πάντα ότι θα σταματήσουμε. Γιατί είναι λίγο της Γιόκο, και είναι λίγο της «Ω όχι». Θέλω το σαγόνι να πέφτει, να γυρίζει το κεφάλι, να σοκάρει το σώμα. Ναι, αυξήσαμε τις πιστωτικές μας κάρτες και μας έδιωξαν από το μπαρ.

Και κάποιο άλλο περιεχόμενο placeholder, για καλό μέτρο.

<nav id="navbar-example2" class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#fat">@fat</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#mdo">@mdo</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#one">one</a>
        <a class="dropdown-item" href="#two">two</a>
        <div role="separator" class="dropdown-divider"></div>
        <a class="dropdown-item" href="#three">three</a>
      </div>
    </li>
  </ul>
</nav>
<div data-spy="scroll" data-target="#navbar-example2" data-offset="0">
  <h4 id="fat">@fat</h4>
  <p>...</p>
  <h4 id="mdo">@mdo</h4>
  <p>...</p>
  <h4 id="one">one</h4>
  <p>...</p>
  <h4 id="two">two</h4>
  <p>...</p>
  <h4 id="three">three</h4>
  <p>...</p>
</div>

Παράδειγμα με ένθετη πλοήγηση

Το Scrollspy λειτουργεί επίσης με ένθετα .navs. Αν είναι φωλιασμένο , θα .navείναι .activeκαι οι γονείς του .active. Κάντε κύλιση στην περιοχή δίπλα στη γραμμή πλοήγησης και παρακολουθήστε την αλλαγή της ενεργής τάξης.

Στοιχείο 1

Περιεχόμενο placeholder για το παράδειγμα scrollspy. Αυτό σχετίζεται με το στοιχείο 1. Σε πάει μίλια ψηλά, τόσο ψηλά, γιατί έχει αυτό το ένα διεθνές χαμόγελο. Υπάρχει ένας άγνωστος στο κρεβάτι μου, υπάρχει ένα σφυροκόπημα στο κεφάλι μου. Ωχ όχι. Σε μια άλλη ζωή θα σε έκανα να μείνεις. Γιατί εγώ, είμαι ικανός για τα πάντα. Ταίριασμα για τη μάχη της στέψης μου. Χρησιμοποιείται για να κλέψεις το ποτό των γονιών σου και να σκαρφαλώσεις στην ταράτσα. Τόνος, μαύρισμα ταιριάζει και έτοιμος, ανασηκώστε το γιατί γίνεται βαρύ. Ο έρωτάς της είναι σαν ναρκωτικό. Υποθέτω ότι ξέχασα ότι είχα μια επιλογή.

Στοιχείο 1-1

Περιεχόμενο placeholder για το παράδειγμα scrollspy. Αυτό σχετίζεται με το στοιχείο 1-1. Έχετε την καλύτερη αρχιτεκτονική. Σφραγίδες διαβατηρίου, είναι κοσμοπολίτισσα. Ωραία, φρέσκια, άγρια, το πήραμε στο λουκέτο. Ποτέ δεν είχα σχεδιάσει ότι μια μέρα θα σε έχανα. Σου τρώει την καρδιά. Το φιλί σου είναι κοσμικό, κάθε κίνηση είναι μαγική. Εννοώ αυτά, εννοώ σαν να είναι αυτή. Χαιρετίσματα αγαπημένοι ας κάνουμε ένα ταξίδι. Απλώς αποκτήστε τη νύχτα σαν την 4η Ιουλίου! Αλλά προτιμάς να σπαταληθείς.

Στοιχείο 1-2

Placeholder content for the scrollspy example. This one relates to the item 1-2. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

Item 2

Placeholder content for the scrollspy example. This one relates to item 2. Don't need apologies. There is no fear now, let go and just be free, I will love you unconditionally. Last Friday night. Don't be a shy kinda guy I'll bet it's beautiful. Summer after high school when we first met. 'Cause she's the muse and the artist. What? Wait. No, no, no, no. Thought that I was the exception.

Item 3

Placeholder content for the scrollspy example. This one relates to item 3. Word on the street, you got somethin' to show me, me. All this money can't buy me a time machine. Make it like your birthday everyday. So we hit the boulevard. You make me feel like I'm livin' a teenage dream, the way you turn me on Skip the talk, heard it all, time to walk the walk. Word on the street, you got somethin' to show me, me. It's no big deal, it's no big deal, it's no big deal.

Item 3-1

Placeholder content for the scrollspy example. This one relates to item 3-1. Baby do you dare to do this? This is no big deal. Yeah, you're lucky if you're on her plane. Just own the night like the 4th of July! Standing on the frontline when the bombs start to fall. So just be sure before you give it all to me.

Item 3-2

Περιεχόμενο placeholder για το παράδειγμα scrollspy. Αυτό σχετίζεται με το σημείο 3-2. Είσαι πρωτότυπος, δεν μπορεί να αντικατασταθεί. Όλο το βράδυ παίζουν, το τραγούδι σου. Κορίτσια της Καλιφόρνια είμαστε αναμφισβήτητοι. Σαν πουλί χωρίς κλουβί. Δεν υπάρχει φόβος τώρα, άσε να φύγεις και απλά να είσαι ελεύθερος, θα σε αγαπώ άνευ όρων. Μπορώ να δω τη γραφή στον τοίχο. Θα μπορούσατε να ταξιδέψετε στον κόσμο, αλλά τίποτα δεν πλησιάζει τη χρυσή ακτή.

<nav id="navbar-example3" class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <nav class="nav nav-pills flex-column">
    <a class="nav-link" href="#item-1">Item 1</a>
    <nav class="nav nav-pills flex-column">
      <a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a>
      <a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a>
    </nav>
    <a class="nav-link" href="#item-2">Item 2</a>
    <a class="nav-link" href="#item-3">Item 3</a>
    <nav class="nav nav-pills flex-column">
      <a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a>
      <a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
    </nav>
  </nav>
</nav>

<div data-spy="scroll" data-target="#navbar-example3" data-offset="0">
  <h4 id="item-1">Item 1</h4>
  <p>...</p>
  <h5 id="item-1-1">Item 1-1</h5>
  <p>...</p>
  <h5 id="item-1-2">Item 1-2</h5>
  <p>...</p>
  <h4 id="item-2">Item 2</h4>
  <p>...</p>
  <h4 id="item-3">Item 3</h4>
  <p>...</p>
  <h5 id="item-3-1">Item 3-1</h5>
  <p>...</p>
  <h5 id="item-3-2">Item 3-2</h5>
  <p>...</p>
</div>

Παράδειγμα με λίστα-ομάδα

Το Scrollspy λειτουργεί επίσης με .list-groups. Κάντε κύλιση στην περιοχή δίπλα στην ομάδα λίστας και παρακολουθήστε την αλλαγή της ενεργής τάξης.

Στοιχείο 1

Περιεχόμενο κράτησης θέσης για το παράδειγμα της ομάδας λίστας κύλισης. Αυτό σχετίζεται με το στοιχείο 1. Δεν χρειάζεται συγγνώμη. Δεν υπάρχει φόβος τώρα, άσε να φύγεις και απλά να είσαι ελεύθερος, θα σε αγαπώ άνευ όρων. Το βράδυ της περασμένης Παρασκευής. Μην είσαι ντροπαλός τύπος, βάζω στοίχημα ότι είναι όμορφο. Καλοκαίρι μετά το Λύκειο όταν πρωτογνωριστήκαμε. Γιατί είναι η μούσα και ο καλλιτέχνης. Τι? Περίμενε. Νόμιζα ότι ήμουν η εξαίρεση.

Στοιχείο 2

Περιεχόμενο κράτησης θέσης για το παράδειγμα της ομάδας λίστας κύλισης. Αυτό σχετίζεται με το στοιχείο 2. Ναι, χορεύει στο δικό της ρυθμό. Ωχ όχι. Θα μπορούσες να είσαι ο καλύτερος. Γιατί, μωρό μου, είσαι πυροτέχνημα. Ίσως ένας λόγος που όλες οι πόρτες είναι κλειστές. Ανοίξτε την καρδιά σας και αφήστε την να ξεκινήσει. Τόσο très chic, ναι, είναι κλασική.

Στοιχείο 3

Περιεχόμενο κράτησης θέσης για το παράδειγμα της ομάδας λίστας κύλισης. Αυτό σχετίζεται με το στοιχείο 3. Ανεβαίνουμε όλο και πιο ψηλά. Ποτέ το ένα χωρίς το άλλο, κάναμε μια συμφωνία. Περπατάω στον αέρα. Κάποιος είπε ότι αφαιρέσατε το τατουάζ σας. Τώρα επιπλέω σαν πεταλούδα. Τόνος, μαύρισμα ταιριάζει και έτοιμος, ανασηκώστε το γιατί γίνεται βαρύ. Γιατί μια φορά είσαι δικός μου, μια φορά είσαι δικός μου. Απλά πρέπει να ανάψεις το φως και να το αφήσεις να λάμψει! Χτυπάμε λοιπόν στη λεωφόρο. Έχετε νιώσει ποτέ, τόσο λεπτό χαρτί. Τα βλέπω όλα, τα βλέπω τώρα.

Στοιχείο 4

Περιεχόμενο κράτησης θέσης για το παράδειγμα της ομάδας λίστας κύλισης. Αυτό σχετίζεται με το στοιχείο 4. Καλοκαίρι μετά το γυμνάσιο όταν πρωτογνωριστήκαμε. Δεν υπάρχει φόβος τώρα, άσε να φύγεις και απλά να είσαι ελεύθερος, θα σε αγαπώ άνευ όρων. Ηλιοκαμένο δέρμα τόσο ζεστό που θα λιώσουμε το ποπό σας. Αυτή η αγάπη θα σας κάνει να αιωρηθείτε.

<div id="list-example" class="list-group">
  <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
  <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
  <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
  <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
</div>
<div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
  <h4 id="list-item-1">Item 1</h4>
  <p>...</p>
  <h4 id="list-item-2">Item 2</h4>
  <p>...</p>
  <h4 id="list-item-3">Item 3</h4>
  <p>...</p>
  <h4 id="list-item-4">Item 4</h4>
  <p>...</p>
</div>

Χρήση

Μέσω χαρακτηριστικών δεδομένων

Για να προσθέσετε εύκολα τη συμπεριφορά scrollspy στην πλοήγησή σας στην επάνω γραμμή, προσθέστε data-spy="scroll"το στο στοιχείο που θέλετε να κατασκοπεύσετε (συνήθως αυτό θα ήταν το <body>). Στη συνέχεια, προσθέστε το data-targetχαρακτηριστικό με το αναγνωριστικό ή την κλάση του γονικού στοιχείου οποιουδήποτε .navστοιχείου Bootstrap.

body {
  position: relative;
}

<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

Μέσω JavaScript

Αφού προσθέσετε position: relative;το CSS σας, καλέστε το scrollspy μέσω JavaScript:

$('body').scrollspy({ target: '#navbar-example' })

Απαιτούνται επιλύσιμοι στόχοι αναγνωριστικών

Οι σύνδεσμοι της γραμμής πλοήγησης πρέπει να έχουν επιλύσιμους στόχους αναγνωριστικού. Για παράδειγμα, το <a href="#home">home</a>must αντιστοιχεί σε κάτι στο DOM όπως <div id="home"></div>.

Τα :visibleστοιχεία που δεν είναι στόχοι αγνοήθηκαν

Τα στοιχεία-στόχοι που δεν είναι :visibleσύμφωνα με το jQuery θα αγνοηθούν και τα αντίστοιχα στοιχεία πλοήγησής τους δεν θα επισημανθούν ποτέ.

Μέθοδοι

.scrollspy('refresh')

Όταν χρησιμοποιείτε το scrollspy σε συνδυασμό με την προσθήκη ή την αφαίρεση στοιχείων από το DOM, θα πρέπει να καλέσετε τη μέθοδο ανανέωσης ως εξής:

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

.scrollspy('dispose')

Καταστρέφει το scrollspy ενός στοιχείου.

Επιλογές

Οι επιλογές μπορούν να μεταβιβαστούν μέσω χαρακτηριστικών δεδομένων ή JavaScript. Για τα χαρακτηριστικά δεδομένων, προσθέστε το όνομα της επιλογής στο data-, όπως στο data-offset="".

Ονομα Τύπος Προκαθορισμένο Περιγραφή
αντισταθμίζεται αριθμός 10 Pixel για μετατόπιση από την κορυφή κατά τον υπολογισμό της θέσης κύλισης.
μέθοδος σειρά αυτο Βρίσκει σε ποια ενότητα βρίσκεται το κατασκοπευμένο στοιχείο. autoΘα επιλέξει την καλύτερη μέθοδο για τη λήψη συντεταγμένων κύλισης. offsetθα χρησιμοποιήσει τη μέθοδο μετατόπισης jQuery για να πάρει συντεταγμένες κύλισης. positionθα χρησιμοποιήσει τη μέθοδο θέσης jQuery για να πάρει συντεταγμένες κύλισης.
στόχος χορδή | Αντικείμενο jQuery | Στοιχείο DOM Καθορίζει το στοιχείο για την εφαρμογή της προσθήκης Scrollspy.

Εκδηλώσεις

Τύπος συμβάντος Περιγραφή
activate.bs.scrollspy Αυτό το συμβάν ενεργοποιείται στο στοιχείο κύλισης κάθε φορά που ένα νέο στοιχείο ενεργοποιείται από το scrollspy. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})