in English

Scrollspy

Päivitä Bootstrap-navigointi- tai luetteloryhmäkomponentit automaattisesti vierityksen sijainnin perusteella osoittamaan, mikä linkki on tällä hetkellä aktiivinen katseluportissa.

Kuinka se toimii

Scrollspyllä on muutamia vaatimuksia toimiakseen oikein:

Jos rakennat JavaScript-koodiamme lähteestä, se vaatiiutil.js .
Sitä on käytettävä Bootstrap- navigointikomponentissa tai -luetteloryhmässä .
Scrollspy vaatii position: relative;vakoilemasi elementin, yleensä <body>.
Kun vakoilet muita elementtejä kuin <body>, varmista, että olet heightmäärittänyt ja käytät overflow-y: scroll;sitä.
Ankkurit ( <a>) ovat pakollisia, ja niiden on osoitettava elementtiin, jolla on id.

Kun se on otettu käyttöön onnistuneesti, navigointi- tai luetteloryhmäsi päivittyy vastaavasti ja siirtää .activeluokan kohteesta toiseen niihin liittyvien tavoitteiden perusteella.

Vieritä navigointipalkin alla olevaa aluetta ja seuraa aktiivisen luokan muutosta. Myös pudotusvalikon kohteet korostetaan.

@rasva

Paikkamerkkisisältö scrollspy-esimerkille. Sinulla on hienoin arkkitehtuuri. Passin leimat, hän on kosmopoliittinen. Hieno, raikas, kova, saimme sen lukkoon. En olisi koskaan suunnitellut, että jonain päivänä menetän sinut. Hän syö sydämesi. Suudellasi on kosminen, jokainen liike on taikuutta. Tarkoitan niitä, tarkoitan kuin hän olisi se. Tervehdys rakkaat, lähdetään matkalle. Omista vain yö kuin 4. heinäkuuta! Mutta menet mieluummin hukkaan.

@mdo

Paikkamerkkisisältö scrollspy-esimerkille. Koska hän on muusa ja taiteilija. (Näin me teemme) Joten haluat leikkiä taikuudella. Joten ole varma ennen kuin annat kaiken minulle. Kävelen, kävelen ilmassa (tänä iltana). Ohita puhe, kuulin kaiken, aika kävellä kävelylle.

yksi

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

Paikkamerkkisisältö scrollspy-esimerkille. Jos haluat tanssia, jos haluat kaiken, tiedät, että olen se tyttö, jolle sinun pitäisi soittaa. Kävelisin myrskyn läpi. Joten anna minun pukea sinut syntymäpäiväpukuun. Se, joka pääsi pois. Viime perjantai-iltana, luulen, että rikoimme lakia, sanomme aina, että lopetamme. Koska hän on vähän Yoko, ja hän on vähän "Voi ei". Haluan, että leuka putoaa, silmät poksahtavat, pää kääntyy, keho järkyttää. Joo, maksoimme luottokorttimme ja meidät potkittiin ulos baarista.

Ja vielä vähän lisää paikkamerkkisisältöä.

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

Esimerkki sisäkkäisestä navista

Scrollspy toimii myös sisäkkäisten .navs:n kanssa. Jos sisäkkäinen .navon .active, myös sen vanhemmat ovat .active. Vieritä navigointipalkin vieressä olevaa aluetta ja katso aktiivisen luokan muutosta.

Kohde 1

Paikkamerkkisisältö scrollspy-esimerkille. Tämä liittyy kohtaan 1. Vie sinut mailia korkealle, niin korkealle, koska hänellä on tuo yksi kansainvälinen hymy. Sängyssäni on muukalainen, päässäni jyskyttää. Voi ei. Toisessa elämässä saisin sinut jäämään. Koska minä pystyn mihin tahansa. Sopii kruunaavaan taisteluun. Käytettiin varastamaan vanhempiesi viinaa ja kiipeämään katolle. Sävy, rusketus ja valmis, lisää se, koska siitä tulee raskasta. Hänen rakkautensa on kuin huume. Luulen, että unohdin, että minulla on mahdollisuus valita.

Kohta 1-1

Paikkamerkkisisältö scrollspy-esimerkille. Tämä liittyy kohtaan 1-1. Sinulla on hienoin arkkitehtuuri. Passin leimat, hän on kosmopoliittinen. Hieno, raikas, kova, saimme sen lukkoon. En olisi koskaan suunnitellut, että jonain päivänä menetän sinut. Hän syö sydämesi. Suudellasi on kosminen, jokainen liike on taikuutta. Tarkoitan niitä, tarkoitan kuin hän olisi se. Tervehdys rakkaat, lähdetään matkalle. Omista vain yö kuin 4. heinäkuuta! Mutta menet mieluummin hukkaan.

Kohta 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

Paikkamerkkisisältö scrollspy-esimerkille. Tämä liittyy kohtaan 3-2. Olet alkuperäinen, et voi korvata. Koko yön he soittavat, sinun lauluasi. Kalifornian tytöt olemme kiistattomia. Kuin lintu ilman häkkiä. Nyt ei ole pelkoa, päästä irti ja ole vain vapaa, rakastan sinua ehdoitta. Näen kirjoituksen seinällä. Voisit matkustaa ympäri maailmaa, mutta mikään ei pääse lähelle kultaista rannikkoa.

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

Esimerkki listaryhmästä

Scrollspy toimii myös .list-groups:n kanssa. Vieritä luetteloryhmän vieressä olevaa aluetta ja seuraa aktiivisen luokan muutosta.

Kohde 1 Kohde 2 Kohde 3 Kohde 4

Kohde 1

Paikkamerkkisisältö scrollspy-luetteloryhmäesimerkille. Tämä liittyy kohtaan 1. Ei tarvitse pyytää anteeksi. Nyt ei ole pelkoa, päästä irti ja ole vain vapaa, rakastan sinua ehdoitta. Viime perjantai-ilta. Älä ole ujo kaveri, lyön vetoa, että se on kaunis. Kesä lukion jälkeen, kun tapasimme ensimmäisen kerran. Koska hän on muusa ja taiteilija. Mitä? Odota. Luulin olevani poikkeus.

Kohde 2

Paikkamerkkisisältö scrollspy-luetteloryhmäesimerkille. Tämä liittyy kohtaan 2. Kyllä, hän tanssii omaan tahtiinsa. Voi ei. Olisit voinut olla mahtavin. Koska, kulta, olet ilotulitus. Ehkä syy siihen, miksi kaikki ovet ovat kiinni. Avaa sydämesi ja anna sen vain alkaa. Joten todella tyylikäs, kyllä, hän on klassikko.

Kohde 3

Paikkamerkkisisältö scrollspy-luetteloryhmäesimerkille. Tämä liittyy kohtaan 3. Menemme korkeammalle ja korkeammalle. Ei koskaan toinen ilman toista, teimme sopimuksen. Kävelen ilmassa. Joku sanoi, että sinulta on poistettu tatuointi. Nyt leijun kuin perhonen. Sävy, rusketus ja valmis, lisää se, koska siitä tulee raskasta. Koska kerran olet minun, kerran olet minun. Sinun täytyy vain sytyttää valo ja antaa sen loistaa! Joten osuimme bulevardille. Tuntuuko sinusta koskaan niin paperin ohuelta. Näen kaiken, näen sen nyt.

Kohde 4

Paikkamerkkisisältö scrollspy-luetteloryhmäesimerkille. Tämä liittyy kohtaan 4. Kesä lukion jälkeen, kun tapasimme ensimmäisen kerran. Nyt ei ole pelkoa, päästä irti ja ole vain vapaa, rakastan sinua ehdoitta. Auringon suutelema iho on niin kuuma, että sulatamme mehukassi. Tämä rakkaus saa sinut leijumaan.

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

Käyttö

Tietomääritteiden kautta

Voit helposti lisätä scrollspy-käyttäytymistä yläpalkin navigointiin lisäämällä data-spy="scroll"elementtiin, jota haluat vakoilla (yleensä tämä on <body>). Lisää sitten attribuutti minkä tahansa Bootstrap- komponentin data-targetpääelementin tunnuksella tai luokalla ..nav

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>

JavaScriptin kautta

Kun olet lisännyt position: relative;CSS:n, kutsu scrollspylle JavaScriptin kautta:

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

Ratkaisevat tunnuskohteet vaaditaan

Navigointipalkin linkeillä on oltava selvitettävät tunnistekohteet. Esimerkiksi <a href="#home">home</a>on vastattava jotain DOM:ssa, kuten <div id="home"></div>.

Ei `:visible`-kohdeelementit ohitettu

Kohdeelementit, jotka eivät ole :visiblejQueryn mukaisia, ohitetaan, eikä niitä vastaavia navigointikohteita korosteta koskaan.

menetelmät

`.scrollspy('refresh')`

Kun käytät scrollspyä yhdessä elementtien lisäämisen tai poistamisen kanssa DOM:sta, sinun on kutsuttava päivitysmenetelmä seuraavasti:

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

`.scrollspy('dispose')`

Tuhoaa elementin scrollspyn.

Vaihtoehdot

Vaihtoehdot voidaan välittää tietomääritteiden tai JavaScriptin kautta. Liitä tietomääritteissä vaihtoehdon nimi kohtaan data-, kuten kohdassa data-offset="".

Nimi	Tyyppi	Oletus	Kuvaus
offset	määrä	10	Pikselit siirtymään ylhäältä, kun lasketaan vierityskohtaa.
menetelmä	merkkijono	auto	Etsii, missä osiossa vakoiluelementti on. Valitsee `auto`parhaan tavan saada vierityskoordinaatit. `offset`käyttää jQuery offset -menetelmää saadakseen vierityskoordinaatit. `position`käyttää jQuery-sijaintimenetelmää vierityskoordinaattien saamiseksi.
kohde	merkkijono \| jQuery-objekti \| DOM-elementti		Määrittää elementin, jota käytetään Scrollspy-laajennuksessa.

Tapahtumat

Tapahtumatyyppi	Kuvaus
activate.bs.scrollspy	Tämä tapahtuma käynnistyy vierityselementissä aina, kun scrollspy aktivoi uuden kohteen.

$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})

Scrollspy

Kuinka se toimii

Esimerkki navigointipalkissa

@rasva

@mdo

yksi

two

three

Esimerkki sisäkkäisestä navista

Kohde 1

Kohta 1-1

Kohta 1-2

Item 2

Item 3

Item 3-1

Item 3-2

Esimerkki listaryhmästä

Kohde 1

Kohde 2

Kohde 3

Kohde 4

Käyttö

Tietomääritteiden kautta

JavaScriptin kautta

Ratkaisevat tunnuskohteet vaaditaan

Ei :visible-kohdeelementit ohitettu

menetelmät

.scrollspy('refresh')

.scrollspy('dispose')

Vaihtoehdot

Tapahtumat

Ei `:visible`-kohdeelementit ohitettu

`.scrollspy('refresh')`

`.scrollspy('dispose')`