in English

Scrollspy

Havaozy ho azy ny fitetezana Bootstrap na tanisao ireo singa vondrona mifototra amin'ny toeran'ny horonam-boky mba hanondroana hoe iza amin'ireo rohy no mavitrika ao amin'ny seranan-tsambo.

Ahoana ny fiasan'izany

Scrollspy dia manana fepetra vitsivitsy mba hiasa tsara:

  • Raha manorina ny JavaScript avy amin'ny loharano ianao dia mitakyutil.js .
  • Tsy maintsy ampiasaina amin'ny singa Bootstrap nav na vondrona lisitra izy io .
  • Scrollspy dia mitaky position: relative;amin'ny singa tsikilovanao, matetika ny <body>.
  • Rehefa mitsikilo singa hafa ankoatry ny <body>, ataovy azo antoka fa manana heightnapetraka sy overflow-y: scroll;ampiharina.
  • Ny vatofantsika ( <a>) dia takiana ary tsy maintsy manondro singa iray miaraka amin'izany id.

Rehefa vita soa aman-tsara dia havaozina mifanaraka amin'izany ny nav na lisitry ny vondronao, hamindra ny .activekilasy avy amin'ny singa iray mankany amin'ny manaraka mifototra amin'ny tanjona mifandraika amin'izy ireo.

Ohatra amin'ny navbar

Soraty eo ambanin'ny navbar ny faritra ary jereo ny fiovan'ny kilasy mavitrika. Hasongadina ihany koa ireo singa midina.

@matavy

Ny votoatin'ny placeholder ho an'ny ohatra scrollspy. Nahazo ny maritrano tsara indrindra ianao. hajia pasipaoro, cosmopolitan izy. Tsara, vaovao, masiaka, azonay tamin'ny hidin-trano. Tsy nieritreritra mihitsy aho hoe ho very anao indray andro any. laniny ny fonao. Ny orokao dia cosmic, ny fihetsika rehetra dia majika. Ny tiako holazaina dia ny tiako holazaina fa izy no ilay izy. Miarahaba havan-tiana andao hanao dia. Manana fotsiny ny alina toy ny 4 Jolay! Fa aleonao ho very maina.

@mdo

Ny votoatin'ny placeholder ho an'ny ohatra scrollspy. Satria izy no muse sy mpanakanto. (Izao no ataontsika) Ka te hilalao ody ianao. Koa matokia tsara aloha vao omenao ahy daholo. Mandeha aho, mandeha amin'ny rivotra (anio alina). Alefaso ny lahateny, heno izany rehetra izany, fotoana handehanana an-tongotra.

iray

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

Ny votoatin'ny placeholder ho an'ny ohatra scrollspy. Raha te handihy ianao, raha tianao izany rehetra izany, fantatrao fa izaho ilay tovovavy tokony hantsoinao. Mandehana mamakivaky ny tafiotra izay tiako. Koa avelao aho haka anao amin'ny akanjonao amin'ny fitsingerenan'ny andro nahaterahanao. Ilay tafatsoaka. Ny alin'ny zoma lasa teo, heveriko fa nandika lalàna izahay, milaza foana fa hijanona. Satria izy dia kely Yoko, Ary kely izy dia 'Oh tsia'. Tiako ny valanorano droppin ', eye poppin', loha mitodika ', vatana shockin'. Eny, nampitombo ny carte de crédit izahay ary voaroaka tao amin'ny bar.

Ary votoaty toeran'ny toerana hafa, ho an'ny fepetra tsara.

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

Ohatra misy nested nav

Scrollspy koa dia miasa amin'ny nested .navs. Raha misy akany .navdia .active, ny ray aman-dreniny dia ho .active. Horohoho ny faritra eo akaikin'ny navbar ary jereo ny fiovan'ny kilasy mavitrika.

Item 1

Ny votoatin'ny placeholder ho an'ny ohatra scrollspy. Ity iray ity dia mifandraika amin'ny singa 1. Mitondra anao kilometatra avo, avo be, satria manana tsiky iraisam-pirenena iray izy. Misy olon-tsy fantatra eo am-pandriako, misy donto ny lohako. Oh, tsia. Amin'ny fiainana hafa dia hataoko mijanona ianao. Satria izaho dia mahavita na inona na inona. Mifanaraka amin'ny ady satroboninahitra nataoko. Nangalatra ny toaka nataon’ny ray aman-dreninao sy nianika tafo. Tone, tan mety ary vonona, atsangano izy io fa mavesa-danja. Toy ny zava-mahadomelina ny fitiavany. Ataoko fa hadinoko fa nanana safidy aho.

Andininy 1-1

Ny votoatin'ny placeholder ho an'ny ohatra scrollspy. Ity iray ity dia mifandraika amin'ny laharana 1-1. Nahazo ny maritrano tsara indrindra ianao. hajia pasipaoro, cosmopolitan izy. Tsara, vaovao, masiaka, azonay tamin'ny hidin-trano. Tsy nieritreritra mihitsy aho hoe ho very anao indray andro any. laniny ny fonao. Ny orokao dia cosmic, ny fihetsika rehetra dia majika. Ny tiako holazaina dia ny tiako holazaina fa izy no ilay izy. Miarahaba havan-tiana andao hanao dia. Manana fotsiny ny alina toy ny 4 Jolay! Fa aleonao ho very maina.

Andininy 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

Ny votoatin'ny placeholder ho an'ny ohatra scrollspy. Ity iray ity dia mifandraika amin'ny laharana 3-2. Original ianao, tsy azo soloina. Milalao mandritra ny alina, ny hiranao. Ny zazavavy Kalifornia dia tsy azo lavina. Toy ny vorona tsy misy tranom-borona. Tsy misy tahotra izao, avelao ary afaho fotsiny, ho tia anao tsy misy fepetra aho. Hitako ny soratra teo amin’ny rindrina. Afaka mitety an'izao tontolo izao ianao fa tsy misy manakaiky ny morontsiraka volamena.

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

Ohatra amin'ny list-group

Scrollspy koa dia miasa amin'ny .list-groups. Soraty eo akaikin'ny vondrona lisitra ilay faritra ary jereo ny fiovan'ny kilasy mavitrika.

Item 1

Ny votoatin'ny placeholder ho an'ny scrollspy list-groupe ohatra. Ity iray ity dia mifandraika amin'ny singa 1. Tsy mila miala tsiny. Tsy misy tahotra izao, avelao ary afaho fotsiny, ho tia anao tsy misy fepetra aho. Zoma alina teo. Aza saro-kenatra ry zalahy fa tsara tarehy. Ny fahavaratra taorian'ny sekoly ambaratonga faharoa fony izahay nihaona voalohany. Satria izy no muse sy mpanakanto. Inona? Andraso. Nihevitra aho fa izaho no maningana.

Andininy faha-2

Ny votoatin'ny placeholder ho an'ny scrollspy list-groupe ohatra. Ity iray ity dia mifandraika amin'ny singa 2. Eny, mandihy amin'ny kapony manokana izy. Oh, tsia. Mety ho ianao no lehibe indrindra. Satria ianao, anaka, afomanga ianao. Angamba antony iray mahatonga ny varavarana rehetra hikatona. Sokafy ny fonao ary avelao izy hanomboka. Tena très chic, eny, klasika izy.

Andininy faha-3

Ny votoatin'ny placeholder ho an'ny scrollspy list-groupe ohatra. Ity iray ity dia mifandraika amin'ny singa 3. Miakatra ambony hatrany isika. Tsy misy tsy misy ny iray, nanao fifanarahana izahay. Mandeha amin'ny rivotra aho. Nisy nilaza fa nesorinao ny tatoazy. Mitsingevana toy ny lolo aho izao. Tone, tan mety ary vonona, atsangano izy io fa mavesa-danja. Satria raha vao ahy ianao, raha vao ahy ianao. Tsy maintsy mandrehitra ny hazavana ianao ary mamela azy hamirapiratra! Dia nidona tamin'ny boulevard izahay. Moa ve ianao mahatsapa, mahatsiaro tena manify taratasy. Hitako daholo, hitako izao.

Andininy faha-4

Ny votoatin'ny placeholder ho an'ny scrollspy list-groupe ohatra. Ity iray ity dia mifandraika amin'ny singa 4. Fahavaratra taorian'ny sekoly ambaratonga faharoa fony izahay nihaona voalohany. Tsy misy tahotra izao, avelao ary afaho fotsiny, ho tia anao tsy misy fepetra aho. Hoditra oroka masoandro mafana dia levona ny popsicle anao. Io fitiavana io dia hahatonga anao hidina.

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

Fampiasana

Amin'ny alàlan'ny data attributes

Raha te hampiditra mora foana ny fihetsika scrollspy amin'ny navigateur topbar dia ampio data-spy="scroll"amin'ny singa tianao hitsikilo (matetika dia ity no <body>). Avy eo dia ampio ny data-targettoetra miaraka amin'ny ID na kilasy amin'ny singa ray amin'ny singa Bootstrap rehetra .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>

Amin'ny JavaScript

Rehefa avy nampidirina position: relative;tao amin'ny CSS-nao, antsoy ny scrollspy amin'ny alàlan'ny JavaScript:

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

Ilaina ny tanjona ID azo vahana

Ny rohy Navbar dia tsy maintsy manana tanjona id azo vahana. Ohatra, <a href="#home">home</a>tsy maintsy mifanaraka amin'ny zavatra ao amin'ny DOM toy ny <div id="home"></div>.

Tsy noraharahiana :visibleireo singa tsy kendrena

Ny singa kendrena izay tsy :visiblemifanaraka amin'ny jQuery dia tsy hojerena ary tsy hasongadina na oviana na oviana ireo singa nav mifanaraka aminy.

fomba

.scrollspy('refresh')

Rehefa mampiasa scrollspy miaraka amin'ny fanampiana na fanesorana singa ao amin'ny DOM ianao dia mila miantso ny fomba fanavaozana toy izao:

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

.scrollspy('dispose')

Manimba ny scrollspy an'ny singa iray.

FANDIKANA

Ny safidy dia azo alefa amin'ny alàlan'ny toetran'ny data na JavaScript. Ho an'ny toetran'ny data, ampidiro amin'ny data-, toy ny ao amin'ny data-offset="".

Anarana Type toerana misy anao Description
offset isa 10 Pikaola ho entin'ny tampony rehefa manao kajy ny toeran'ny horonam-boky.
FOMBA tady fiara Hifidy autony fomba tsara indrindra hahazoana ny fandrindrana horonan-taratasy. offsetdia hampiasa fomba offset jQuery hahazoana koordinate scroll. positiondia hampiasa fomba toeran'ny jQuery hahazoana koordinate horonan-taratasy.
tanjona string | jQuery object | singa DOM Manondro singa hampiharana ny plugin Scrollspy.

zava-mitranga

Karazana hetsika Description
activate.bs.scrollspy Ity hetsika ity dia mirehitra amin'ny singa horonam-boky isaky ny misy singa vaovao velomin'ny scrollspy. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})