in English

Scrollspy

Eguneratu automatikoki Bootstrap nabigazioa edo zerrenda taldeen osagaiak korritze-posizioaren arabera, une honetan bistaratzeko esteka aktibo dagoen adierazteko.

Nola dabil

Scrollspy-k behar bezala funtzionatzeko baldintza batzuk ditu:

  • Gure JavaScript iturburutik eraikitzen ari bazara, beharrezkoautil.js da .
  • Bootstrap nav osagai edo zerrenda talde batean erabili behar da .
  • Scrollspy position: relative;-k zelatatzen ari zaren elementua eskatzen du, normalean <body>.
  • Ez beste elementuak zelatatzen dituzunean <body>, ziurtatu heightmultzo bat duzula eta overflow-y: scroll;aplikatuta.
  • Aingurak ( <a>) beharrezkoak dira eta horrekin duen elementu bat adierazi behar dute id.

Arrakastaz inplementatzen denean, zure nabigazioa edo zerrenda taldea horren arabera eguneratuko da, eta .activeklasea elementu batetik bestera eramango du lotutako helburuen arabera.

Adibidea nabigazio barran

Joan nabigazio-barraren azpiko eremua eta ikusi klase aktiboaren aldaketa. Goitibeherako elementuak ere nabarmenduko dira.

@potolo

Scrollspy adibiderako leku-markaren edukia. Arkitekturarik onena lortu duzu. Pasaporte zigiluak, kosmopolita da. Fina, freskoa, gogorra, giltzapean lortu dugu. Inoiz ez nuen planifikatu egunen batean zu galduko nintzenik. Zure bihotza jaten dizu. Zure musua kosmikoa da, mugimendu bakoitza magia da. Horiek esan nahi dut, bera bera balitz bezala. Agurrak maiteak, egin dezagun bidaia. Uztailaren 4a bezalako gauaz jabetu zaitez! Baina nahiago duzu alferrik galdu.

@mdo

Scrollspy adibiderako leku-markaren edukia. Musa eta artista delako. (Horrela egiten dugu) Beraz, magiarekin jolastu nahi duzu. Beraz, ziur egon dena eman aurretik. ibiltzen naiz, airean nago (gaur). Saltatu hitzaldia, dena entzun, paseoan ibiltzeko ordua.

bat

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

Scrollspy adibiderako leku-markaren edukia. Dantza egin nahi baduzu, dena nahi baduzu, badakizu ni naizela deitu behar duzun neska. Ekaitzaren zehar ibiliko nuke. Beraz, utz nazazu zure urtebetetze jantzia eramaten. Alde egin zuena. Joan den ostiral gauean, bai, legea hautsi genuela uste dut, beti esan geldituko garela. Bera Yokoren apur bat delako, eta 'Oh ez' pixka bat. Masailezurra erortzea nahi dut, begiak ateratzea, burua bueltatzea, gorputza harritzea. Bai, gure kreditu-txartelak mugatu ditugu eta tabernatik kanporatu gaituzte.

Eta leku-markaren eduki gehiago, neurri onean.

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

Adibidea nabigazio habiaratuarekin

Scrollspy habiaratuekin ere funtzionatzen du .nav. Habiaratua .navbada .active, bere gurasoak ere izango dira .active. Joan nabigazio barraren ondoko eremua eta ikusi klase aktiboaren aldaketa.

1. elementua

Scrollspy adibiderako leku-markaren edukia. Honek 1. elementuarekin erlazionatzen du. Mila gora eramaten zaitu, hain altu, nazioarteko irribarre bakarra duelako. Ezezagun bat dago nire ohean, taupada bat dago nire buruan. Oh ez. Beste bizitza batean geratuko zintuzkete. Ni, edozertarako gai naizelako. Nire koroa-gudurako egokituta. Gurasoen likorea lapurtu eta teilatura igotzeko erabiltzen da. Tonua, beltzarana egokitu eta prest, igo ezazu astun bihurtzen delako. Bere maitasuna droga bat bezalakoa da. Aukera bat nuela ahaztu nuela uste dut.

1-1 elementua

Scrollspy adibiderako leku-markaren edukia. Hau 1-1 itemari dagokio. Arkitekturarik onena lortu duzu. Pasaporte zigiluak, kosmopolita da. Fina, freskoa, gogorra, giltzapean lortu dugu. Inoiz ez nuen planifikatu egunen batean zu galduko nintzenik. Zure bihotza jaten dizu. Zure musua kosmikoa da, mugimendu bakoitza magia da. Horiek esan nahi dut, bera bera balitz bezala. Agurrak maiteak, egin dezagun bidaia. Uztailaren 4a bezalako gauaz jabetu zaitez! Baina nahiago duzu alferrik galdu.

1-2 elementua

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

Scrollspy adibiderako leku-markaren edukia. Hau 3-2 elementuari dagokio. Jatorrizkoa zara, ezin da ordezkatu. Gau osoan ari dira jotzen, zure abestia. Kaliforniako neskak ukaezina gara. Kaiolarik gabeko txoria bezala. Orain ez dago beldurrik, askatu eta izan aske, baldintzarik gabe maitatuko zaitut. Horman idatzia ikusten dut. Munduan zehar bidaiatu dezakezu baina ezer ez da urrezko kostaldera hurbiltzen.

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

Adibidea zerrenda-taldearekin

Scrollspy- .list-groupk s-rekin ere funtzionatzen du. Joan zerrenda taldearen ondoko eremua eta ikusi klase aktiboaren aldaketa.

1. elementua

Srollspy zerrenda-taldearen adibiderako leku-markaren edukia. Hau 1. elementuari dagokio. Ez duzu barkamenik behar. Orain ez dago beldurrik, askatu eta izan aske, baldintzarik gabe maitatuko zaitut. Azken ostiral gaua. Ez izan mutil lotsatia ederra dela apustu egingo dut. Batxilergoaren ostean uda ezagutu genuen lehen aldiz. Musa eta artista delako. Zer? Itxaron. Salbuespena nintzela pentsatu nuen.

2. elementua

Srollspy zerrenda-taldearen adibiderako leku-markaren edukia. Hau 2. itemari dagokio. Bai, bere erritmoan dantzatzen du. Oh ez. Handiena izan zinen. Zeren, haurra, su artifizial bat zara. Ate guztiak itxita egotearen arrazoi bat agian. Ireki zure bihotza eta utzi hastea. Beraz, oso chic, bai, klasiko bat da.

3. elementua

Srollspy zerrenda-taldearen adibiderako leku-markaren edukia. Hau 3. itemari dagokio. Gero eta gorago goaz. Inoiz bata bestea gabe, itun bat egin genuen. airean noa. Norbaitek esan zuen tatuajea kendu dizula. Orain tximeleta bat bezala flotatzen ari naiz. Tonua, beltzarana egokitu eta prest, igo ezazu astun bihurtzen delako. Zeren behin nirea zarenean, behin nirea zarenean. Argia piztu eta distira utzi behar duzu! Bulebarrera jo genuen beraz. Sentitzen al zara inoiz, hain paper mehea sentitu. Dena ikusten dut, orain ikusten dut.

4. elementua

Srollspy zerrenda-taldearen adibiderako leku-markaren edukia. Hau 4. itemarekin erlazionatzen da. Batxilergoaren ostean uda lehenengoz elkartu ginenean. Orain ez dago beldurrik, askatu eta izan aske, baldintzarik gabe maitatuko zaitut. Eguzkiaren azala hain beroa urtuko dugu zure popsiclea. Maitasun honek lebitatuko zaitu.

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

Erabilera

Datu-atributuen bidez

Scrollspy portaera zure goiko barrako nabigazioan erraz gehitzeko, gehitu data-spy="scroll"espioi nahi duzun elementuari (normalean hau izango litzateke <body>). Ondoren, gehitu atributua Bootstrap-eko edozein osagairen data-targetelementu nagusiaren ID edo klasearekin ..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>

JavaScript bidez

Zure CSS gehitu ondoren position: relative;, deitu scrollspy JavaScript bidez:

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

Ebatzi daitezkeen ID-helburuak behar dira

Navbar-en estekek id-helburu konpongarriak izan behar dituzte. Adibidez, <a href="#home">home</a>behar bat DOM bezalako zerbaiti dagokio <div id="home"></div>.

Helburu ez :visiblediren elementuak baztertu dira

:visiblejQuery-ren araberakoak ez diren xede-elementuak ez dira aintzat hartuko eta dagozkien nabigazio-elementuak ez dira inoiz nabarmenduko.

Metodoak

.scrollspy('refresh')

Scrollspy DOMetik elementuak gehitzearekin edo kentzearekin batera erabiltzean, freskatzeko metodora deitu beharko duzu honela:

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

.scrollspy('dispose')

Elementu baten scrollspy suntsitzen du.

Aukerak

Aukerak datu-atributuen edo JavaScript bidez pasa daitezke. Datu-atributuetarako, erantsi aukera-izena data-, hemen bezala data-offset="".

Izena Mota Lehenetsia Deskribapena
desplazamendu zenbakia 10 Goitik desplazatzeko pixelak korrituaren posizioa kalkulatzean.
metodoa katea autoa Elementu espiatua zein sekziotan dagoen aurkitzen du. autoKorritzeko koordenatuak lortzeko metodo onena aukeratuko du. offsetjQuery offset metodoa erabiliko du korritze-koordenatuak lortzeko. positionjQuery posizio metodoa erabiliko du korritze-koordenatuak lortzeko.
xede katea | jQuery objektua | DOM elementua Scrollspy plugina aplikatzeko elementua zehazten du.

Gertaerak

Gertaera mota Deskribapena
aktibatu.bs.scrollspy Gertaera honek korritze-elementuari eragiten dio scrollspy-k elementu berri bat aktibatzen duen bakoitzean. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})