in English

Scrollspy

Uppfærðu sjálfkrafa Bootstrap siglingar eða lista hóphluta byggt á skrunstöðu til að gefa til kynna hvaða hlekkur er virkur í útsýnisglugganum.

Hvernig það virkar

Scrollspy hefur nokkrar kröfur til að virka rétt:

  • Ef þú ert að byggja JavaScript okkar frá uppruna, krefstutil.js það .
  • Það verður að nota á Bootstrap nav íhlut eða listahóp .
  • Scrollspy krefst position: relative;þess þáttar sem þú ert að njósna um, venjulega <body>.
  • Þegar þú njósnar um aðra þætti en <body>, vertu viss um að hafa heightsett og overflow-y: scroll;beitt.
  • Akkeri ( <a>) eru nauðsynleg og verða að benda á þátt með því id.

Þegar innleiðing hefur tekist, mun siglinga- eða listahópurinn þinn uppfæra í samræmi við það og færa .activebekkinn frá einu atriði til annars miðað við tengd markmið þeirra.

Dæmi í navbar

Skrunaðu svæðið fyrir neðan siglingastikuna og horfðu á virka bekkinn breytast. Fellilistaratriðin verða einnig auðkennd.

@feiti

Staðsetningarefni fyrir scrollspy dæmið. Þú ert með fínasta arkitektúr. Vegabréfafrímerki, hún er heimsborgari. Fínt, ferskt, grimmt, við fengum það á lás. Ég ætlaði aldrei að einn daginn myndi ég missa þig. Hún étur út úr þér hjartað. Koss þinn er kossískur, sérhver hreyfing er galdur. Ég meina þær, ég meina eins og hún sé sú eina. Sælir ástvinir skulum fara í ferðalag. Eigðu bara nóttina eins og 4. júlí! En þú vilt frekar fara til spillis.

@mdo

Staðsetningarefni fyrir scrollspy dæmið. Vegna þess að hún er músin og listamaðurinn. (Svona gerum við) Svo þú vilt leika þér með töfra. Svo vertu bara viss áður en þú gefur mér allt. Ég er að labba, ég geng á lofti (í kvöld). Slepptu ræðunni, heyrði allt, tími til kominn að ganga.

einn

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

Staðsetningarefni fyrir scrollspy dæmið. Ef þú vilt dansa, ef þú vilt allt, þá veistu að ég er stelpan sem þú ættir að kalla. Ganga í gegnum storminn myndi ég. Svo leyfðu mér að koma þér í afmælisfötin. Sá sem komst undan. Síðasta föstudagskvöld, já ég held að við höfum brotið lög, segjum alltaf að við ætlum að hætta. Vegna þess að hún er svolítið Yoko og hún er svolítið „Ó nei“. Ég vil að kjálkann sleppi, augun springa, hausinn snúast, líkaminn sjokkerast. Já, við náðum að hámarka kreditkortin okkar og vorum reknir út af barnum.

Og meira staðgengilsefni, til góðs.

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

Dæmi með hreiðrað nav

Scrollspy vinnur einnig með hreiður .navs. Ef hreiður .naver .active, verða foreldrar þess einnig .active. Skrunaðu yfir svæðið við hlið stýrisstikunnar og horfðu á virka bekkinn breytast.

Liður 1

Staðsetningarefni fyrir scrollspy dæmið. Þessi tengist atriði 1. Tekur þig kílómetra hátt, svo hátt, vegna þess að hún hefur þetta eina alþjóðlega bros. Það er ókunnugur maður í rúminu mínu, það er hamingja í höfðinu á mér. Ó nei. Í öðru lífi myndi ég láta þig vera. Vegna þess að ég, ég er fær um hvað sem er. Passa upp fyrir krúnubaráttuna mína. Notað til að stela áfengi foreldra þinna og klifra upp á þakið. Tónn, sólbrúnn og tilbúinn, snúðu honum upp vegna þess að hann verður þungur. Ást hennar er eins og eiturlyf. Ég býst við að ég hafi gleymt að ég átti val.

Liður 1-1

Staðsetningarefni fyrir scrollspy dæmið. Þessi tengist liðnum 1-1. Þú ert með fínasta arkitektúr. Vegabréfafrímerki, hún er heimsborgari. Fínt, ferskt, grimmt, við fengum það á lás. Ég ætlaði aldrei að einn daginn myndi ég missa þig. Hún étur út úr þér hjartað. Koss þinn er kossískur, sérhver hreyfing er galdur. Ég meina þær, ég meina eins og hún sé sú eina. Sælir ástvinir skulum fara í ferðalag. Eigðu bara nóttina eins og 4. júlí! En þú vilt frekar fara til spillis.

Liður 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

Staðsetningarefni fyrir scrollspy dæmið. Þessi tengist lið 3-2. Þú ert upprunalegur, ekki hægt að skipta um það. Alla nóttina eru þeir að spila, lagið þitt. Kaliforníustelpur, við erum óneitanlega. Eins og fugl án búrs. Það er enginn ótti núna, slepptu takinu og vertu bara frjáls, ég mun elska þig skilyrðislaust. Ég sé skriftina á veggnum. Þú gætir ferðast um heiminn en ekkert kemur nálægt gullnu ströndinni.

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

Dæmi með lista-hóp

Scrollspy vinnur líka með .list-groups. Skrunaðu svæðið við hlið listahópsins og horfðu á virka bekkinn breytast.

Liður 1

Staðsetningarefni fyrir scrollspy listahópsdæmið. Þessi tengist lið 1. Þarf ekki að biðjast afsökunar. Það er enginn ótti núna, slepptu takinu og vertu bara frjáls, ég mun elska þig skilyrðislaust. Síðasta föstudagskvöld. Ekki vera feiminn strákur, ég þori að veðja að hann er fallegur. Sumar eftir menntaskóla þegar við hittumst fyrst. Vegna þess að hún er músin og listamaðurinn. Hvað? Bíddu. Hélt að ég væri undantekningin.

Liður 2

Staðsetningarefni fyrir scrollspy listahópsdæmið. Þessi tengist atriði 2. Já, hún dansar við sinn eigin takt. Ó nei. Þú hefðir getað verið bestur. Vegna þess, elskan, þú ert flugeldur. Kannski ástæðan fyrir því að allar dyr eru lokaðar. Opnaðu hjarta þitt og láttu það byrja. Svo très flott, já, hún er klassísk.

Liður 3

Staðsetningarefni fyrir scrollspy listahópsdæmið. Þessi tengist lið 3. Við förum hærra og hærra. Aldrei eitt án annars, við gerðum sáttmála. Ég geng á lofti. Einhver sagði að þú hefðir látið fjarlægja húðflúrið þitt. Nú svíf ég eins og fiðrildi. Tónn, sólbrúnn og tilbúinn, snúðu honum upp vegna þess að hann verður þungur. Því þegar þú ert minn, einu sinni ertu minn. Þú verður bara að kveikja ljósið og láta það skína! Svo við skelltum okkur á breiðgötuna. Finnst þér einhvern tímann vera svona pappírsþunnur. Ég sé þetta allt, ég sé það núna.

Liður 4

Staðsetningarefni fyrir scrollspy listahópsdæmið. Þessi tengist lið 4. Sumar eftir menntaskóla þegar við hittumst fyrst. Það er enginn ótti núna, slepptu takinu og vertu bara frjáls, ég mun elska þig skilyrðislaust. Sólkysst húð svo heit að við munum bræða íspinnann þinn. Þessi ást mun láta þig svífa.

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

Notkun

Í gegnum gagnaeiginleika

Til að bæta scrollspy hegðun auðveldlega við toppstikuna þína skaltu bæta data-spy="scroll"við þættinum sem þú vilt njósna um (oftast væri þetta <body>). Bættu síðan við data-targeteigindinni með auðkenninu eða flokki móðurþáttar hvers Bootstrap .navíhluta.

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>

Með JavaScript

Eftir að þú hefur bætt position: relative;við CSS skaltu hringja í scrollspy í gegnum JavaScript:

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

Skiljanleg auðkennismarkmið krafist

Navbar tenglar verða að hafa leysanleg auðkennismarkmið. Til dæmis <a href="#home">home</a>verður að samsvara einhverju í DOM eins og <div id="home"></div>.

Ómarksatriði :visiblehunsuð

Markþættir sem eru ekki :visiblesamkvæmt jQuery verða hunsaðir og samsvarandi nav atriði þeirra verða aldrei auðkennd.

Aðferðir

.scrollspy('refresh')

Þegar þú notar scrollspy í tengslum við að bæta við eða fjarlægja þætti úr DOM þarftu að kalla á endurnýjunaraðferðina svona:

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

.scrollspy('dispose')

Eyðir scrollspy frumefnis.

Valmöguleikar

Hægt er að senda valkosti í gegnum gagnaeiginleika eða JavaScript. Fyrir gagnaeiginleika skaltu bæta heiti valkostsins við data-, eins og í data-offset="".

Nafn Tegund Sjálfgefið Lýsing
á móti númer 10 Dílar til að vega upp frá toppi þegar reiknað er út stöðu flettu.
aðferð strengur sjálfvirkt Finnur í hvaða hluta njósnaða þátturinn er. automun velja bestu aðferðina til að fá skrunhnit. offsetmun nota jQuery offset aðferð til að fá skrunhnit. positionmun nota jQuery stöðuaðferðina til að fá skrunhnit.
skotmark strengur | jQuery hlutur | DOM þáttur Tilgreinir þátt til að nota Scrollspy viðbótina.

Viðburðir

Tegund atburðar Lýsing
active.bs.scrollspy Þessi atburður kviknar á skrunelementinu í hvert sinn sem nýr hlutur verður virkjaður af scrollspy. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})