in English

Scrollspy

Automatesch Update Bootstrap Navigatioun oder Lëscht Grupp Komponente baséiert op Scroll Positioun fir unzeginn wéi eng Link am Moment aktiv ass am Viewport.

Wéi et funktionnéiert

Scrollspy huet e puer Ufuerderunge fir richteg ze fonktionnéieren:

  • Wann Dir eis JavaScript aus der Quell baut, brauchutil.js et .
  • Et muss op engem Bootstrap nav Komponent oder Lëscht Grupp benotzt ginn .
  • Scrollspy verlaangt position: relative;op d'Element Dir Spioun op, normalerweis der <body>.
  • Wann Spioun op Elementer aner wéi de <body>, ginn sécher e heightSet ze hunn an overflow-y: scroll;applizéiert.
  • Anker ( <a>) sinn erfuerderlech a mussen op en Element mat deem weisen id.

Wann erfollegräich ëmgesat, wäert Är nav oder Lëscht Grupp deementspriechend Aktualiséierung opgetrueden, réckelen der .activeKlass vun engem Element op déi nächst baséiert op hir assoziéiert Ziler.

Beispill an navbar

Scroll d'Gebitt ënner der Navbar a kuckt d'aktiv Klass änneren. D'Dropdown-Elementer ginn och markéiert.

@fett

Plazhalter Inhalt fir d'Scrollspy Beispill. Dir hutt déi schéinsten Architektur. Passstempel, si ass kosmopolitesch. Schéin, frësch, hefteg, mir hunn et op Spär. Ni geplangt datt enges Daags ech dech géif verléieren. Si ësst Äert Häerz aus. Äre Kuss ass kosmesch, all Beweegung ass Magie. Ech mengen déi, ech mengen wéi si deen ass. Gréiss Léifsten loosst eis eng Rees maachen. Besëtz just d'Nuecht wéi de 4. Juli! Awer Dir gitt léiwer verschwend.

@mdo

Plazhalter Inhalt fir d'Scrollspy Beispill. Well si ass d'Muse an d'Kënschtlerin. (Dëst ass wéi mir et maachen) Also wëllt Dir mat Magie spillen. Also sidd just sécher ier Dir mir alles gitt. Ech ginn zu Fouss, ech ginn op der Loft (den Owend). Sprangen d'Gespréich, héieren et alles, Zäit fir de Spazéiergang ze goen.

eent

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

Plazhalter Inhalt fir d'Scrollspy Beispill. Wann Dir wëllt danzen, wann Dir alles wëllt, wësst Dir datt ech d'Meedchen sinn dat Dir sollt uruffen. Spadséiergank duerch de Stuerm ech géif. Also loosst mech Iech an Ärem Gebuertsdagskostüm kréien. Deen deen fortgaang ass. Leschte Freideg Nuecht, jo, ech mengen, mir hunn d'Gesetz gebrach, ëmmer soen, mir wäerten ophalen. Well si ass e bësse Yoko, A si ass e bëssen "Oh nee". Ech wëll de Kiefer dropin ', Ae poppin', Kapp dréinen, Kierperschockin '. Jo, mir hunn eis Kredittkaarte maximéiert a sinn aus der Bar geschloen.

An e puer méi Plazhalter Inhalt, fir gutt Moossnam.

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

Beispill mat Nested nav

Scrollspy Wierker och mat nested .navs. Wann e Nest .navass .active, wäerten seng Elteren och .active. Scroll d'Gebitt nieft der Navbar a kuckt d'aktiv Klass änneren.

Artikel 1

Plazhalter Inhalt fir d'Scrollspy Beispill. Dëst bezitt sech op den Artikel 1. Huelt Iech Meilen héich, sou héich, well hatt huet dat en internationale Laachen. Do ass e Friemen a mengem Bett, et ass e Pound a mengem Kapp. Oh, nee. An engem anere Liewen géif ech Iech bleiwen. Well ech, ech sinn alles kapabel. Passt op meng Krounschluecht. Benotzt fir Ären Elteren Alkohol ze klauen an op den Daach ze klammen. Ton, tan fit a prett, dréit et erop well et schwéier gëtt. Hir Léift ass wéi en Drogen. Ech denken datt ech vergiess hunn datt ech e Choix hat.

Punkt 1-1

Plazhalter Inhalt fir d'Scrollspy Beispill. Dëst bezitt sech op den Artikel 1-1. Dir hutt déi schéinsten Architektur. Passstempel, si ass kosmopolitesch. Schéin, frësch, hefteg, mir hunn et op Spär. Ni geplangt datt enges Daags ech dech géif verléieren. Si ësst Äert Häerz aus. Äre Kuss ass kosmesch, all Beweegung ass Magie. Ech mengen déi, ech mengen wéi si deen ass. Gréiss Léifsten loosst eis eng Rees maachen. Besëtz just d'Nuecht wéi de 4. Juli! Awer Dir gitt léiwer verschwend.

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

Plazhalter Inhalt fir d'Scrollspy Beispill. Dëst bezitt sech op den Artikel 3-2. Dir sidd originell, kann net ersat ginn. Déi ganz Nuecht spillen se, Äert Lidd. Kalifornien Meedercher mir sinn onbestreideg. Wéi e Vugel ouni Käfeg. Et gëtt keng Angscht elo, lass lass a sief einfach fräi, ech wäert dech bedingungslos gär hunn. Ech gesinn d'Schreiwen op der Mauer. Dir kënnt d'Welt reesen, awer näischt kënnt der gëllener Küst no.

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

Beispill mat Lëscht-Grupp

Scrollspy Wierker och mat .list-groups. Scroll de Beräich nieft der Lëscht Grupp a kuckt déi aktiv Klass änneren.

Artikel 1

Plazhalter Inhalt fir d'Scrollspy Lëscht-Grupp Beispill. Dëst bezitt sech op den Artikel 1. Braucht keng Entschëllegung. Et gëtt keng Angscht elo, lass lass a sief einfach fräi, ech wäert dech bedingungslos gär hunn. An der Nuecht vum leschte Freideg. Sidd net e schei Kinda Guy, ech wetten datt et schéin ass. Summer no Lycée wann mir eis éischt begéint. Well si ass d'Muse an d'Kënschtlerin. Waat? Waart. Ech hu geduecht datt ech d'Ausnam wier.

Artikel 2

Plazhalter Inhalt fir d'Scrollspy Lëscht-Grupp Beispill. Dëst bezitt sech op den Artikel 2. Jo, hatt danzt op hirem eegene Beat. Oh, nee. Dir hätt de gréisste gewiescht. Cause, Puppelchen, Dir sidd e Freedefeier. Vläicht e Grond firwat all d'Dieren zou sinn. Maacht Äert Häerz op a loosst et just ufänken. Also très chic, jo, si ass e Klassiker.

Artikel 3

Plazhalter Inhalt fir d'Scrollspy Lëscht-Grupp Beispill. Dëst bezitt sech op den Artikel 3. Mir ginn ëmmer méi héich. Ni een ouni deen aneren, mir hunn e Pakt gemaach. Ech ginn op der Loft. Eppes sot Dir hutt Är Tattoo ewechgeholl. Elo schwiewen ech wéi e Päiperléck. Ton, tan fit a prett, dréit et erop well et schwéier gëtt. Cause eemol bass du mäin, eemol bass du mäin. Dir musst just d'Liicht ignite a loossen et blénken! Also hu mir de Boulevard getraff. Fillt Dir jeemools, fillt Iech sou Pabeier dënn. Ech gesinn alles, ech gesinn et elo.

Artikel 4

Plazhalter Inhalt fir d'Scrollspy Lëscht-Grupp Beispill. Dëst bezitt sech op Punkt 4. Summer nom Lycée wéi mir eis éischt begéint hunn. Et gëtt keng Angscht elo, lass lass a sief einfach fräi, ech wäert dech bedingungslos gär hunn. Sonn-Kuss Haut sou waarm wäerte mir Är popsicle schmëlzen. Dës Léift wäert Iech levitéieren.

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

Benotzung

Via daten Attributer

Fir einfach scrollspy Verhalen op Är Topbar Navigatioun ze addéieren data-spy="scroll", füügt d'Element un op déi Dir wëllt spionéieren (meeschtens wier dëst de <body>). Füügt dann den data-targetAttribut mat der ID oder der Klass vum Elterendeel vun all Bootstrap .navKomponent un.

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>

Iwwer JavaScript

Nodeems Dir position: relative;Är CSS bäigefüügt hutt, rufft de Scrollspy iwwer JavaScript:

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

Opléisbar ID Ziler erfuerderlech

Navbar Linken mussen opléisbar ID Ziler hunn. Zum Beispill, e <a href="#home">home</a>Must entsprécht eppes an der DOM wéi <div id="home"></div>.

Net :visible-Zilelementer ignoréiert

Zilelementer déi net :visibleno jQuery sinn, ginn ignoréiert an hir entspriechend nav Elementer ginn ni beliicht.

Methoden

.scrollspy('refresh')

Wann Dir Scrollspy benotzt a Verbindung mat der Zousatz oder Ewechhuele vun Elementer aus der DOM, musst Dir d'Erfrëschungsmethod sou nennen:

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

.scrollspy('dispose')

Zerstéiert en Element Scrollspy.

Optiounen

Optiounen kënnen iwwer Datenattributer oder JavaScript weidergeleet ginn. Fir Datenattributer, fügen d'Optiounsnumm un data-, wéi an data-offset="".

Numm Typ Default Beschreiwung
offset Zuel 10 Pixel fir vun uewen ze kompenséieren wann Dir d'Positioun vun der Scroll berechnen.
Method String auto Fannt an wéi eng Sektioun de spionéierten Element ass. autowäert déi bescht Method wielen fir Scroll Koordinaten ze kréien. offsetwäert d'jQuery Offset Method benotzen fir Scroll Koordinaten ze kréien. positionwäert d'jQuery Positiounsmethod benotzen fir Scroll Koordinaten ze kréien.
Ziel streng | jQuery Objet | DOM Element Spezifizéiert Element fir Scrollspy Plugin z'applizéieren.

Evenementer

Event Typ Beschreiwung
activate.bs.scrollspy Dëst Evenement brennt op de Scroll Element wann en neit Element vum Scrollspy aktivéiert gëtt. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})