in English

Scrollspy

Aktualisieren Sie automatisch die Bootstrap-Navigation oder listen Sie Gruppenkomponenten basierend auf der Bildlaufposition auf, um anzuzeigen, welcher Link derzeit im Ansichtsfenster aktiv ist.

Wie es funktioniert

Scrollspy hat ein paar Voraussetzungen, um richtig zu funktionieren:

  • Wenn Sie unser JavaScript aus der Quelle erstellenutil.js , ist .
  • Es muss auf einer Bootstrap -Navigationskomponente oder Listengruppe verwendet werden .
  • Scrollspy benötigt position: relative;das Element, das Sie ausspionieren, normalerweise die <body>.
  • Wenn Sie andere Elemente als die ausspionieren <body>, stellen Sie sicher, dass Sie ein heightSet haben und overflow-y: scroll;angewendet werden.
  • Anchors ( <a>) sind erforderlich und müssen damit auf ein Element zeigen id.

Bei erfolgreicher Implementierung wird Ihre Navigations- oder Listengruppe entsprechend aktualisiert und die .activeKlasse basierend auf den zugehörigen Zielen von einem Element zum nächsten verschoben.

Beispiel in der Navigationsleiste

Scrollen Sie im Bereich unterhalb der Navigationsleiste und beobachten Sie, wie sich die aktive Klasse ändert. Die Dropdown-Elemente werden ebenfalls hervorgehoben.

@fett

Platzhalterinhalt für das Scrollspy-Beispiel. Sie haben die feinste Architektur. Passstempel, sie ist weltoffen. Gut, frisch, wild, wir haben es auf Verschluss. Nie geplant, dass ich dich eines Tages verlieren würde. Sie frisst dein Herz heraus. Dein Kuss ist kosmisch, jede Bewegung ist magisch. Ich meine die, ich meine, als wäre sie die Eine. Grüße ihr Lieben, lasst uns eine Reise unternehmen. Besitzen Sie einfach die Nacht wie den 4. Juli! Aber du willst lieber verschwendet werden.

@mdo

Platzhalterinhalt für das Scrollspy-Beispiel. Denn sie ist die Muse und die Künstlerin. (So ​​machen wir es) Du willst also mit Magie spielen. Also sei sicher, bevor du mir alles gibst. Ich gehe, ich gehe auf Luft (heute Abend). Überspringen Sie das Gespräch, haben Sie alles gehört, Zeit, den Weg zu gehen.

eines

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

Platzhalterinhalt für das Scrollspy-Beispiel. Wenn du tanzen willst, wenn du alles willst, weißt du, dass ich das Mädchen bin, das du anrufen solltest. Ich würde durch den Sturm gehen. Also lass mich dir deinen Geburtstagsanzug anziehen. Der Davongekommenere. Letzten Freitagabend, ja, ich denke, wir haben das Gesetz gebrochen, sagen immer, wir werden aufhören. Denn sie ist ein bisschen wie Yoko, und sie ist ein bisschen wie ‚Oh nein‘. Ich will, dass die Kinnlade herunterfällt, die Augen knallen, der Kopf sich dreht, der Körper schockt. Ja, wir haben unsere Kreditkarten ausgeschöpft und wurden aus der Bar geschmissen.

Und noch ein paar Platzhalterinhalte, für ein gutes Maß.

<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>

Beispiel mit verschachtelter Navigation

Scrollspy funktioniert auch mit verschachtelten .navs. Wenn eine verschachtelt .navist .active, sind auch ihre Eltern .active. Scrollen Sie im Bereich neben der Navigationsleiste und beobachten Sie, wie sich die aktive Klasse ändert.

Gegenstand 1

Platzhalterinhalt für das Scrollspy-Beispiel. Das bezieht sich auf Punkt 1. Bringt dich meilenweit hoch, so hoch, weil sie dieses eine internationale Lächeln hat. Da ist ein Fremder in meinem Bett, da dröhnt es in meinem Kopf. Ach nein. In einem anderen Leben würde ich dich zum Bleiben bringen. Denn ich, ich bin zu allem fähig. Anziehen für meinen krönenden Kampf. Wird verwendet, um den Schnaps deiner Eltern zu stehlen und aufs Dach zu klettern. Ton, tan fit und bereit, dreh es auf, denn es wird schwer. Ihre Liebe ist wie eine Droge. Ich schätze, dass ich vergessen habe, dass ich eine Wahl hatte.

Punkt 1-1

Platzhalterinhalt für das Scrollspy-Beispiel. Dieser bezieht sich auf Punkt 1-1. Sie haben die feinste Architektur. Passstempel, sie ist weltoffen. Gut, frisch, wild, wir haben es auf Verschluss. Nie geplant, dass ich dich eines Tages verlieren würde. Sie frisst dein Herz heraus. Dein Kuss ist kosmisch, jede Bewegung ist magisch. Ich meine die, ich meine, als wäre sie die Eine. Grüße ihr Lieben, lasst uns eine Reise unternehmen. Besitzen Sie einfach die Nacht wie den 4. Juli! Aber du willst lieber verschwendet werden.

Punkt 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

Platzhalterinhalt für das Scrollspy-Beispiel. Dieser bezieht sich auf Punkt 3-2. Du bist ein Original, nicht ersetzbar. Die ganze Nacht spielen sie dein Lied. Kalifornische Mädchen, wir sind unbestreitbar. Wie ein Vogel ohne Käfig. Es gibt jetzt keine Angst mehr, lass los und sei einfach frei, ich werde dich bedingungslos lieben. Ich kann die Schrift an der Wand sehen. Sie könnten die Welt bereisen, aber nichts kommt der goldenen Küste nahe.

<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>

Beispiel mit Listengruppe

Scrollspy funktioniert auch mit .list-groups. Scrollen Sie im Bereich neben der Listengruppe und beobachten Sie, wie sich die aktive Klasse ändert.

Gegenstand 1

Platzhalterinhalt für das Beispiel der Scrollspy-Listengruppe. Dieser bezieht sich auf Punkt 1. Brauchen Sie keine Entschuldigung. Es gibt jetzt keine Angst mehr, lass los und sei einfach frei, ich werde dich bedingungslos lieben. Am letzten Freitag Nacht. Sei kein schüchterner Typ, ich wette, es ist wunderschön. Sommer nach der High School, als wir uns das erste Mal trafen. Denn sie ist die Muse und die Künstlerin. Was? Warte ab. Dachte, ich wäre die Ausnahme.

Punkt 2

Platzhalterinhalt für das Beispiel der Scrollspy-Listengruppe. Dieser bezieht sich auf Punkt 2. Ja, sie tanzt zu ihrem eigenen Takt. Ach nein. Du hättest der Größte sein können. 'Denn Schatz du bist ein Feuerwerk. Vielleicht ein Grund, warum alle Türen geschlossen sind. Öffne dein Herz und lass es einfach beginnen. So très chic, ja, sie ist ein Klassiker.

Punkt 3

Platzhalterinhalt für das Beispiel der Scrollspy-Listengruppe. Dieser bezieht sich auf Punkt 3. Wir gehen höher und höher. Nie einer ohne den anderen, wir haben einen Pakt geschlossen. Ich schwebe auf Wolken. Jemand sagte, du hättest dein Tattoo entfernen lassen. Ich schwebe jetzt wie ein Schmetterling. Ton, tan fit und bereit, dreh es auf, denn es wird schwer. Denn sobald du mein bist, bist du einmal mein. Du musst nur das Licht entzünden und es scheinen lassen! Also trafen wir auf den Boulevard. Fühlst du dich jemals so dünn wie Papier? Ich sehe alles, ich sehe es jetzt.

Punkt 4

Platzhalterinhalt für das Beispiel der Scrollspy-Listengruppe. Dieser bezieht sich auf Punkt 4. Sommer nach der High School, als wir uns das erste Mal trafen. Es gibt jetzt keine Angst mehr, lass los und sei einfach frei, ich werde dich bedingungslos lieben. Sonnengeküsste Haut, so heiß, dass wir dein Eis am Stiel schmelzen. Diese Liebe wird dich schweben lassen.

<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>

Verwendungszweck

Über Datenattribute

Um ganz einfach Scrollspy-Verhalten zu Ihrer Topbar-Navigation hinzuzufügen, fügen data-spy="scroll"Sie das Element hinzu, das Sie ausspionieren möchten (normalerweise wäre dies das <body>). Fügen Sie dann das data-targetAttribut mit der ID oder Klasse des übergeordneten Elements einer beliebigen Bootstrap- .navKomponente hinzu.

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>

Über JavaScript

Nachdem position: relative;Sie Ihr CSS hinzugefügt haben, rufen Sie den Scrollspy über JavaScript auf:

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

Auflösbare ID-Ziele erforderlich

Navbar-Links müssen auflösbare ID-Ziele haben. Zum Beispiel <a href="#home">home</a>muss a etwas im DOM wie entsprechen <div id="home"></div>.

Nicht- Zielelemente :visiblewerden ignoriert

Zielelemente, die nicht :visiblejQuery entsprechen, werden ignoriert und ihre entsprechenden Navigationselemente werden niemals hervorgehoben.

Methoden

.scrollspy('refresh')

Wenn Sie scrollspy in Verbindung mit dem Hinzufügen oder Entfernen von Elementen aus dem DOM verwenden, müssen Sie die Aktualisierungsmethode wie folgt aufrufen:

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

.scrollspy('dispose')

Zerstört den Scrollspy eines Elements.

Optionen

Optionen können über Datenattribute oder JavaScript übergeben werden. Hängen Sie für Datenattribute den Optionsnamen an data-, wie in data-offset="".

Name Typ Standard Beschreibung
versetzt Nummer 10 Pixel, die bei der Berechnung der Bildlaufposition vom oberen Rand versetzt werden sollen.
Methode Schnur Auto Findet heraus, in welchem ​​Abschnitt sich das ausspionierte Element befindet. autowählt die beste Methode, um Scroll-Koordinaten zu erhalten. offsetverwendet die jQuery-Offset-Methode, um Bildlaufkoordinaten zu erhalten. positionverwendet die jQuery-Positionsmethode, um die Bildlaufkoordinaten zu erhalten.
Ziel Zeichenfolge | jQuery-Objekt | DOM-Element Gibt das Element zum Anwenden des Scrollspy-Plugins an.

Veranstaltungen

Ereignistyp Beschreibung
activate.bs.scrollspy Dieses Ereignis wird auf dem Scroll-Element ausgelöst, wenn ein neues Element vom Scrollspy aktiviert wird. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})