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.

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

@matavy

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi talohan'ny namidy azy ireo. Tumblr farm-to-table zon'ny bisikileta na inona na inona. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui mety mbola tsy naheno azy ireo ianao ary ny cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tatoazy accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

one

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.

two

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa na inona na inona kamiao sakafo delectus. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats angamba mbola tsy henonao momba azy ireo consequat hoodie tsy misy gluten lo-fi fap aliquip. Miasa elit placeat alohan'ny hamidy, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

<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-haspopup="true" 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

Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non exceptioneur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Alefaso any amin'ny toerana misy anao tsy misy fisalasalana id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.

Andininy 1-1

Amet tempor mollit aliquip pariatur excepteur commodo do ea cillum commodo Lorem et occaecat elit qui et. Aliquip labore ex esse voluptate occaecat Lorem ullamco deserunt. Aliqua cillum excepteur irure consequat id quis ea. Sit proident ullamco aute magna pariatur nostrud labore. Reprehenderit aliqua commodo eiusmod aliquip est do duis amet proident magna consectetur consequat eu commodo fugit non quis. Enim aliquip exercitation ullamco adipisicing voluptate excepteur minimum exercitation minimum commodo adipisicing exercitation officia nisi adipisicing. Anim id duis qui consequat labore adipisicing sint dolor elit cillum anim et fugiat.

Andininy faha-2-2

Cillum nisi deserunt magna eiusmod qui eiusmod velit voluptate pariatur laborum sunt enim. Irure laboris mollit consequat incididunt sint et culpa culpa incididunt adipisicing magna magna occaecat. Nulla ipsum cillum eiusmod sint elit excepteur ea labore enim consectetur in labore anim. Proident ullamco ipsum esse elit ut Lorem eiusmod dolor et eiusmod. Anim occaecat nulla in non consequat eiusmod velit incididunt.

Item 2

Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.

Item 3

Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.

Item 3-1

Deserunt quis elit Lorem eiusmod amet enim enim amet minim Lorem proident nostrud. Ea id dolore anim exercitation aute fugiat labore voluptate cillum do laboris labore. Ex velit exercitation nisi enim labore reprehenderit labore nostrud ut ut. Esse officia sunt duis aliquip ullamco tempor eiusmod deserunt irure nostrud irure. Ullamco proident veniam laboris ea consectetur magna sunt ex exercitation aliquip minim enim culpa occaecat exercitation. Est tempor excepteur aliquip laborum consequat do deserunt laborum esse eiusmod irure proident ipsum esse qui.

Item 3-2

Miasa amin'ny commodo elit adipisicing sit aliquip elit proident voluptate minimum mollit nostrud aute reprehenderit do. Mollit exceptioneur eu Lorem ipsum anim commodo sint labore Lorem in exercitation velit incididunt. Occaecat consectetur nisi in occaecat proident minimum enim sunt reprehenderit exercitation cupidatat et do officia. Ampifanaraho amin'ny asa ny asa. Sit pariatur tempor proident in veniam culpa aliqua excepteur elit magna fugiat eiusmod amet officia.

<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 2-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 Andininy faha-2 Andininy faha-3 Andininy faha-4

Item 1

Andininy faha-2

Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Ny fanazaran-tena tsy ara-drariny dia azo atao. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugit ex est consectetur ipsum commodo tempor sunt in proident.

Andininy faha-3

Noho izany, dia tsy maintsy manao reprehenderit culpa duis ianao. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.

Andininy faha-4

<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 `:visible`ireo 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.

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…
})

Scrollspy

Ahoana ny fiasan'izany

Ohatra amin'ny navbar

@matavy

@mdo

one

two

three

Ohatra misy nested nav

Item 1

Andininy 1-1

Andininy faha-2-2

Item 2

Item 3

Item 3-1

Item 3-2

Ohatra amin'ny list-group

Item 1

Andininy faha-2

Andininy faha-3

Andininy faha-4

Fampiasana

Amin'ny alàlan'ny data attributes

Amin'ny JavaScript

Ilaina ny tanjona ID azo vahana

Tsy noraharahiana :visibleireo singa tsy kendrena

fomba

.scrollspy('refresh')

.scrollspy('dispose')

FANDIKANA

zava-mitranga

Tsy noraharahiana `:visible`ireo singa tsy kendrena

`.scrollspy('refresh')`

`.scrollspy('dispose')`