in English

Scrollspy

Automatarie renovatio Bootstrap navigationis vel listarum partium secundum librum positionis ad indicandum quae ligatio actuosa est in prospectu.

Quomodo facitur

Scrollspy pauca habet requisita ad recte operandum;

  • Si JavaScript a fonte aedificas, postulatutil.js .
  • Utendum est in Bootstrap nav componente vel list group .
  • Scrollspy requirit position: relative;elementum explorandi, plerumque <body>.
  • Cum alia quam elementa explorans <body>, certa heightet overflow-y: scroll;apposita habere debetis.
  • Ancorae <a>requiruntur et elementum cum eo designare debet id.

Cum feliciter perficiatur, coetus tuus nav vel album renovabit proinde, movens .activegenus ab uno ad proximum fundatur in scutis consociatis.

Exemplum in navbar

Librum aream sub navbare et mutationem classis activae observa. The dropdown items will be highlighted as well.

@fat

Placeholder contentum ad scrollspy exemplum. Optima architectura adepta es. Congue notat, cosmopolitana esse. Egregius, recens, ferox, seram nos obtinuit. Numquam cogitavit unum diem te perdere vellem. Illa cor tuum manducat foras. Osculum tuum est cosmicum, omne motum magia est. Istos dico, id est ut illa. Salvete carorum abeamus iter. Sicut nox possidebit sicut die 4 mensis Iulii! Sed vastare mavis.

@mdo

Placeholder contentum ad scrollspy exemplum. 'Causa ipsa est musa et artifex. (Hoc modo facimus) Sic magicas ludere habes. Ita cave modo, antequam omnia mihi dederis. Ambulo, in aere ambulo (nocte). Omit sermonem, omnes audivit, tempus ambulare.

unus

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

Placeholder contentum ad scrollspy exemplum. Si saltare habes, si omnia vis, scis me esse puellam quam appelles. Perambula tempestatem volo. Ita fac ut te in natali tuo conveniam. Alter id abscessisset. Postrema nocte Veneris, memini me cogitare legem fregi, semper dicimus nos agnus sistendum. 'Parum est causa Yoko, Et haec exigua est' Oh non. Volo maxillam droppin', oculum poppinum, caput turnin', corpus shockin. Yeah, fidem chartarum nostram maxedimus et e vectis calce emimus.

Et quidam magis placens contentus, pro mensura.

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

Exemplum cum nested nav

Scrollspy item opera nidos .navs. Si nidos .nav, .activeet parentes ejus erunt .active. Scroll aream navbari proximam et mutationem classis activae speculare.

Item 1

Placeholder contentum ad scrollspy exemplum. Hoc unum pertinet ad item 1. Capit te miliaria alta, tam alta, 'causam obtinuit ut una risu internationale'. Est in lecto peregrinus, est in capite tunsio. Oh, no. In altera vita morari volo. Ego sum aliquid posse. Conveniens pro meo coronario pugna. Furari liquorem parentum solebas et ad tectum ascendere. Tone, tan idoneus et paratus, converte eam causam suam gravem gettin. Amor illius medicamento similis est. Coniecto me oblitus sum delectum habere.

Item 1-1

Placeholder contentum ad scrollspy exemplum. Hoc item 1-1. Optima architectura adepta es. Congue notat, cosmopolitana esse. Egregius, recens, ferox, seram nos obtinuit. Numquam cogitavit unum diem te perdere vellem. Illa cor tuum manducat foras. Osculum tuum est cosmicum, omne motum magia est. Istos dico, id est ut illa. Salvete carorum abeamus iter. Sicut nox possidebit sicut die 4 mensis Iulii! Sed vastare mavis.

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

Placeholder contentum ad scrollspy exemplum. Hoc unum pertinet ad item 3-2. Originale es, reponi non potest. Tota nocte ludunt, tuum carmen. California puellae negandae sumus. Sicut avis sine cavea. Nunc metus non est, dimitte ac iustus esse gratis, amabo te omnimodo. in pariete scripturam videre possum. Peragrare potuisti, sed nihil ad oras auream accedit.

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

Exemplum cum album-group

Scrollspy etiam opera .list-groups. Librum aream iuxta numerum indicem ac mutationem classis activae speculabuntur.

Item 1

Placeholder contentum pro exemplo voluminis inscripti globi. Hoc unum pertinet ad item 1. non opus est paenitemus. Nunc metus non est, dimitte ac iustus esse gratis, amabo te omnimodo. Nocte proxima Veneris. Noli esse timidi pius guy Ego bet suus 'pulcher. Aestas post alta schola cum primum convenimus. 'Causa ipsa est musa et artifex. Quid est? Manere. Exceptio me esse arbitrabar.

Item 2

Placeholder contentum pro exemplo voluminis inscripti globi. Hoc unum refert item 2. Yeah, saltat ad pulsum suum. Oh, no. Fuisti maxima. 'Causa, infans, es firework'. Forsitan causa cur omnes ianuis claudantur. Aperi cor tuum, et mox incipias. Ita tres pullus, yeah, classicus est.

Item 3

Placeholder contentum pro exemplo voluminis inscripti globi. Hoc unum pertinet ad item 3. altius et altius venimus. Nunquam unum sine altero foedus fecimus. In aere ambulo. Dixit aliquis te figuras tuas removisse. Nunc quasi papilio fluctuo. Tone, tan idoneus et paratus, converte eam causam suam gravem gettin. Causa quondam mea es, quondam mea es. Vos iustus Redditus accende lucem et luceat! Boulevard sic ferimur. Tu semper sentis, sentis tam gracilem chartam. Omnia video, nunc video.

Item 4

Placeholder contentum pro exemplo voluminis inscripti globi. Hoc unum pertinet ad item 4. Aestas post alta schola cum primum convenimus. Nunc metus non est, dimitte ac iustus esse gratis, amabo te omnimodo. Pellem sole osculatam tam calidam popsiclum tuum conflabimus. Hic amor te levitatem faciet.

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

Consuetudinem

Via data attributa

Ut facile cartis mores ad navigationem topbaris tuam addas data-spy="scroll", elementum quod vis explorare (plerumque hoc futurum est <body>) adde elementum. Adde data-targetattributum cum ID vel genere elementi parentis alicuius .navcomponentis Bootstrap.

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>

Via JavaScript

His additis position: relative;in CSS, vocate scrollspy per JavaScript:

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

Resolvable ID scuta requiratur

Navbar nexus solvendos id scuta habere debet. Verbi gratia, <a href="#home">home</a>debet respondere alicui simile in DOM <div id="home"></div>.

Non :visibleneglecta elementa target

Elementa scoporum quae :visiblesecundum jQuery non sunt neglecta erunt et earum res navales respondentes numquam illustrabuntur.

Methodi

.scrollspy('refresh')

Cum usu cartis in conjunctione cum addendo vel removendo elementorum e domno, methodum reficiendi similem vocare debes:

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

.scrollspy('dispose')

Destructio elementi scrollspy.

Optiones

Optiones transigi possunt per data attributa vel JavaScript. Data enim attributa, adiungunt optionis nomen data-, ut in data-offset="".

Nomen Type Default Descriptio
offset numerus 10 Elementa ad offset a summo cum positio libri computandi.
methodo filum auto Quam sectionem elementum exploratum reperit. autooptimam methodum eliget ut librum coordinatarum recipiat. offsetjQuery offset methodo utetur ad coordinatas volumen. positionjQuery positionis modum adhibebit ad coordinatas volumen.
target string | jQuery object | dom elementum Elementum specificat ut plugin Scrollspy adhibere.

Events

Event Type Descriptio
activate.bs.scrollspy Eventus ille ignes in librum elementi quotiens nova item per scrollspy excitatur. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})