in English

Scrollspy

Aŭtomate ĝisdatigu Bootstrap-navigadon aŭ listigu grupkomponentojn surbaze de rulpozicio por indiki kiu ligilo estas nuntempe aktiva en la vidfenestro.

Kiel ĝi funkcias

Scrollspy havas kelkajn postulojn por funkcii ĝuste:

  • Se vi konstruas nian JavaScript el la fonto, ĝi postulasutil.js .
  • Ĝi devas esti uzata en Bootstrap nav-komponento aŭ listogrupo .
  • Scrollspy postulas position: relative;sur la elemento, kiun vi spionas, kutime la <body>.
  • Spionante elementojn krom la <body>, nepre havi heightaron kaj overflow-y: scroll;aplikita.
  • Ankroj ( <a>) estas postulataj kaj devas montri elementon kun tio id.

Kiam sukcese efektivigita, via navigacio aŭ listgrupo ĝisdatigos laŭe, movante la .activeklason de unu objekto al la sekva surbaze de iliaj rilataj celoj.

Ekzemplo en navbar

Rulumu la areon sub la navbar kaj rigardu la aktivan klasŝanĝon. La menumenuoj ankaŭ estos reliefigitaj.

@graso

Loktenilo enhavo por la scrollspy ekzemplo. Vi ricevis la plej bonan arkitekturon. Pasportaj poŝtmarkoj, ŝi estas kosmopolita. Bone, freŝa, furioza, ni ricevis ĝin en seruro. Neniam planis, ke iam mi perdos vin. Ŝi manĝas vian koron. Via kiso estas kosma, ĉiu movo estas magia. Mi volas diri tiujn, mi volas diri kiel ŝi estas tiu. Saluton karaj, ni vojaĝu. Nur posedu la nokton kiel la 4-an de julio! Sed vi preferus malŝpari.

@mdo

Loktenilo enhavo por la scrollspy ekzemplo. Ĉar ŝi estas la muzo kaj la artisto. (Jen kiel ni faras) Do vi volas ludi kun magio. Do nur estu certa antaŭ ol vi donos ĉion al mi. Mi marŝas, mi marŝas en aero (hodiaŭ vespere). Preterpasu la paroladon, aŭdis ĉion, tempon por promeni.

unu

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

Loktenilo enhavo por la scrollspy ekzemplo. Se vi volas danci, se vi volas ĉion, vi scias, ke mi estas la knabino, kiun vi devus voki. Promenu tra la ŝtormo, kiun mi volus. Do lasu min porti vin en via naskiĝtaga kostumo. Tiu, kiu forkuris. Lastan vendredon nokte, jes, mi pensas, ke ni malobeis la leĝon, ĉiam diras, ke ni ĉesos. Ĉar ŝi estas iomete de Yoko, Kaj ŝi estas iomete de 'Oh ne'. Mi volas, ke la makzelo falu, la okulon ekbrulis, la kapon turniĝu, la korpoŝokiĝu. Jes, ni maksimumigis niajn kreditkartojn kaj estis elpelitaj el la drinkejo.

Kaj iom pli da lokokupilo enhavo, por bona mezuro.

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

Ekzemplo kun nestita navigacio

Scrollspy ankaŭ funkcias kun nestitaj .navs. Se nesto .navestas .active, ĝiaj gepatroj ankaŭ estos .active. Rulumu la areon apud la navbar kaj rigardu la aktivan klasŝanĝon.

Item 1

Loktenilo enhavo por la scrollspy ekzemplo. Ĉi tiu rilatas al ero 1. Portas vin mejlojn altan, tiom alte, ĉar ŝi havas tiun internacian rideton. Estas fremdulo en mia lito, estas batado en mia kapo. Ho ne. En alia vivo mi igus vin resti. Ĉar mi, mi kapablas je ĉio. Konvenante por mia kronanta batalo. Kutimis ŝteli la alkoholaĵon de viaj gepatroj kaj grimpi al la tegmento. Tono, sunbruno taŭgas kaj preta, turnu ĝin, ĉar ĝi fariĝas peza. Ŝia amo estas kiel drogo. Mi supozas, ke mi forgesis, ke mi havis elekton.

Item 1-1

Loktenilo enhavo por la scrollspy ekzemplo. Ĉi tiu rilatas al la ero 1-1. Vi ricevis la plej bonan arkitekturon. Pasportaj poŝtmarkoj, ŝi estas kosmopolita. Bone, freŝa, furioza, ni ricevis ĝin en seruro. Neniam planis, ke iam mi perdos vin. Ŝi manĝas vian koron. Via kiso estas kosma, ĉiu movo estas magia. Mi volas diri tiujn, mi volas diri kiel ŝi estas tiu. Saluton karaj, ni vojaĝu. Nur posedu la nokton kiel la 4-an de julio! Sed vi preferus malŝpari.

Item 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

Loktenilo enhavo por la scrollspy ekzemplo. Ĉi tiu rilatas al ero 3-2. Vi estas originala, ne povas esti anstataŭigita. La tutan nokton ili ludas, via kanto. Kaliforniaj knabinoj ni estas nekontesteblaj. Kiel birdo sen kaĝo. Ne estas timo nun, lasu kaj simple estu libera, mi amos vin senkondiĉe. Mi povas vidi la skribon sur la muro. Vi povus vojaĝi tra la mondo, sed nenio proksimiĝas al la ora marbordo.

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

Ekzemplo kun listo-grupo

Scrollspy ankaŭ funkcias kun .list-groups. Rulumu la areon apud la listogrupo kaj rigardu la aktivan klasŝanĝon.

Item 1

Loktenilo enhavo por la scrollspy listo-grupo ekzemplo. Ĉi tiu rilatas al ero 1. Ne bezonas pardonpetojn. Ne estas timo nun, lasu kaj simple estu libera, mi amos vin senkondiĉe. Lastan vendredon nokte. Ne estu timema ulo, mi vetas, ke ĝi estas bela. Somero post mezlernejo kiam ni unue renkontis. Ĉar ŝi estas la muzo kaj la artisto. Kio? Atendu. Mi pensis, ke mi estas la escepto.

Item 2

Loktenilo enhavo por la scrollspy listo-grupo ekzemplo. Ĉi tiu rilatas al ero 2. Jes, ŝi dancas laŭ sia propra ritmo. Ho ne. Vi povus esti la plej granda. Ĉar, bebo, vi estas artfajraĵo. Eble kialo, kial ĉiuj pordoj estas fermitaj. Malfermu vian koron kaj nur lasu ĝin komenci. Do tre ŝika, jes, ŝi estas klasika.

Item 3

Loktenilo enhavo por la scrollspy listo-grupo ekzemplo. Ĉi tiu rilatas al ero 3. Ni iras pli kaj pli alten. Neniam unu sen la alia, ni faris pakton. Mi marŝas en aero. Iu diris, ke vi forigis vian tatuon. Nun mi flosas kiel papilio. Tono, sunbruno taŭgas kaj preta, turnu ĝin, ĉar ĝi fariĝas peza. Ĉar iam vi estas mia, iam vi estas mia. Vi nur devas ŝalti la lumon kaj lasi ĝin brili! Do ni trafis la bulvardon. Ĉu vi iam sentas, sentas vin tiel papera maldika. Mi vidas ĉion, mi vidas ĝin nun.

Item 4

Loktenilo enhavo por la scrollspy listo-grupo ekzemplo. Ĉi tiu rilatas al ero 4. Somero post mezlernejo kiam ni unue renkontis. Ne estas timo nun, lasu kaj simple estu libera, mi amos vin senkondiĉe. Sun-kisita haŭto tiel varmega ni fandos vian popsicle. Ĉi tiu amo igos vin leviĝi.

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

Uzado

Per datumaj atributoj

Por facile aldoni scrollspy-konduton al via supra navigado, aldonu data-spy="scroll"al la elemento, kiun vi volas spioni (plej kutime ĉi tio estus la <body>). Poste aldonu la data-targetatributon kun la ID aŭ klaso de la gepatra elemento de iu ajn Bootstrap- .navkomponento.

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>

Per JavaScript

Post aldoni position: relative;vian CSS, voku la scrollspy per JavaScript:

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

Solveblaj ID-celoj bezonataj

Navbar-ligiloj devas havi solveblajn id-celojn. Ekzemple, <a href="#home">home</a>devas respondi al io en la DOM kiel <div id="home"></div>.

Ne- :visiblecelaj elementoj ignoritaj

Celelementoj kiuj ne estas :visiblelaŭ jQuery estos ignoritaj kaj iliaj respondaj nav-eroj neniam estos reliefigitaj.

Metodoj

.scrollspy('refresh')

Kiam vi uzas scrollspy kune kun aldono aŭ forigo de elementoj de la DOM, vi devos nomi la refreŝigan metodon tiel:

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

.scrollspy('dispose')

Detruas la scrollspy de elemento.

Opcioj

Opcioj povas esti pasitaj per datumaj atributoj aŭ JavaScript. Por datumaj atributoj, aldonu la opcionomon al data-, kiel en data-offset="".

Nomo Tajpu Defaŭlte Priskribo
ofseto nombro 10 Pikseloj por kompensi de supro dum kalkulado de pozicio de rullibro.
metodo ŝnuro aŭtomate Trovas en kiu sekcio troviĝas la spionita elemento. autoelektos la plej bonan metodon por akiri rulkoordinatojn. offsetuzos jQuery-offset-metodon por akiri rulkoordinatojn. positionuzos jQuery-pozician metodon por akiri rulkoordinatojn.
celo ŝnuro | jQuery objekto | DOM-elemento Specifas elementon por apliki Scrollspy kromaĵon.

Eventoj

Eventa Tipo Priskribo
aktivigi.bs.scrollspy Ĉi tiu evento pafas sur la rul-elemento kiam ajn nova objekto estas aktivigita de la scrollspy. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})