Source

Scrollspy hmanga ziah a ni

Viewport-a eng link nge active mek tih hriattir turin scroll position hmangin Bootstrap navigation emaw list group components emaw chu automatic-in update rawh.

A hnathawh dan

Scrollspy hian a hnathawh that theih nan thil mamawh tlemte a nei a:

  • Kan JavaScript hi source atanga i siam a nih chuanutil.js .
  • Bootstrap nav component emaw list group emaw ah hman tur a ni .
  • Scrollspy hian position: relative;i spying element chu a mamawh a, a tlangpuiin <body>.
  • , tih loh element dang spy dawnin set nei la, apply <body>ngei ngei tur a ni.heightoverflow-y: scroll;
  • Anchors ( <a>) te hi a ngai a , chu chuan element pakhat a kawhhmuh tur a idni .

Hlawhtling taka implement a nih chuan i nav emaw list group emaw chuan a tul angin a update ang a, .activean target inzawm dan azirin class chu item pakhat atanga item dang ah a sawn ang.

Entirnan navbar ah

Navbar hnuaia area chu scroll la, active class inthlak dan chu en rawh. Dropdown items te pawh a highlight ang.

@thau

A rilru a buai em em a, a rilru a hah em em bawk a. Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi an hralh chhuah hma qui. Tumblr farm-to-table bicycle dikna eng pawh ni se. Anim keffiyeh chuan carles cardigan a ti a. Velit seitan mcsweeney thlalak booth 3 savawm thla irure. A rilru a buai em em a, a rilru a hah em em bawk a, a rilru a buai em em bawk a, a rilru a hah em em bawk a, a rilru a hah em em bawk a, a rilru a hah em em bawk a. et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh kut hnathawktu ullamco consequat.

@mdo a ni

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 eng pawh delectus ei tur phur truck. A rilru a buai em em a, a rilru a hah em em bawk a. id assumenda. Locavore sed helvetica cliche irony, thundercats te hi i hre lo mai thei consequat hoodie gluten-free lo-fi fap aliquip. Laboure elit placeat an hralh zawh hmain, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan siam fel vek velit a ni. VHS chambray laboris hun rei lote chhunga hman theih a ni. A rilru a buai em em a, a rilru a hah em em bawk a.

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

Entirnan nested nav hmangin

Scrollspy hian nested .navs nen pawh a thawk thei bawk. Nested .nava nih chuan a .activenu leh pa te pawh an ni ang .active. Navbar bula area chu scroll la, active class inthlak dan chu en rawh.

Item 1-na a ni

A rilru a hah lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a. Ex consequat commodo adipisicing exercise aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur leh aute consectetur hnathawh tur a ni. A rilru a hah lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a. Qui laborum do non excepteur nulla magna eiusmod consectetur in. A rilru a hah lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a. A rilru a buai em em a, a rilru a hah em em bawk a, a rilru a buai em em bawk a, a rilru a hah em em bawk a, a rilru a hah em em bawk a, a rilru a hah em em bawk a.

Item 1-1-na a ni

A rilru a buai em em a, a rilru a hah em em bawk a, a rilru a buai em em bawk a, a rilru a hah em em bawk a. Lorem et occaecat elit qui et. A rilru a hah lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a. Lorem ullamco deserunt. A rilru a buai em em a, a rilru a hah em em bawk a. Aliqua cillum excepteur irure consequat id quis ea. A rilru a buai em em a, a rilru a hah em em bawk a. A rilru a buai em em a, a rilru a hah em em bawk a, a rilru a buai em em bawk a, a rilru a hah em em bawk a, a rilru a hah em em bawk a, a rilru a hah em em bawk a, a rilru a hah em em bawk a. A rilru a buai em em a, a rilru a hah em em bawk a, a rilru a buai em em bawk a, a rilru a hah em em bawk a, a rilru a hah em em bawk a, a rilru a hah em em bawk a, a rilru a hah em em bawk a, a rilru a hah em em bawk a. A rilru a buai em em a, a rilru a hah em em bawk a, a rilru a buai em em bawk a, a rilru a hah em em bawk a, a rilru a hah em em bawk a.

Item 2-2-na a ni

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

A rilru a buai em em a, a rilru a hah em em bawk a, a rilru a buai em em bawk a, a rilru a hah em em bawk a, a rilru a hah em em bawk a, a rilru a hah em em bawk a, a rilru a hah em em bawk a. Mollit excepteur eu Lorem ipsum anim commodo sint labore A rilru a hah lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a. A rilru a buai em em a, a rilru a hah em em bawk a, a rilru a buai em em bawk a, a rilru a hah em em bawk a, a rilru a hah em em bawk a, a rilru a hah em em bawk a. A rilru a buai em em a, a rilru a hah em em bawk a. Aliquip consequat ad labore labore mollit ut amet. A rilru a buai em em a, a rilru a hah em em bawk a, a rilru a buai em em bawk a, a rilru a hah em em bawk a. 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>

Entirnan list-group nen

Scrollspy pawh hian .list-groups. List group bula area chu scroll la, active class inthlak dan chu en rawh.

Item 1-na a ni

A rilru a hah lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a. Ex consequat commodo adipisicing exercise aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur leh aute consectetur hnathawh tur a ni. A rilru a hah lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a. Qui laborum do non excepteur nulla magna eiusmod consectetur in. A rilru a hah lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a. A rilru a buai em em a, a rilru a hah em em bawk a, a rilru a buai em em bawk a, a rilru a hah em em bawk a, a rilru a hah em em bawk a, a rilru a hah em em bawk a.

Item 2-na a ni

A rilru a buai em em a, a rilru a hah em em bawk a, a rilru a buai em em bawk a, a rilru a hah em em bawk a. Laborum consequat non elit enim exercise lakna tur a ni a, a hlawhtlinna chu a hlawhtlinna a ni. A rilru a hah lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. A rilru a buai em em a, a rilru a hah em em bawk a, a rilru a buai em em bawk a, a rilru a hah em em bawk a. Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit hnathawh officia laborum excepteur commodo ni lo dolor tih loh chu commodo a ni. A rilru a hah lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.

Item 3-na a ni

Quis anim thu do amet fugiat dolor velit thu ea ea do reprehenderit culpa duis. A rilru a buai em em a, a rilru a hah em em bawk a, a rilru a buai em em bawk a, a rilru a hah em em bawk a, a rilru a hah em em bawk a. A rilru a buai em em a, a rilru a hah em em bawk a, a rilru a buai em em bawk a, a rilru a hah em em bawk a, a rilru a hah em em bawk a, a rilru a hah em em bawk a.

Item 4-na a ni

Quis anim thu do amet fugiat dolor velit thu ea ea do reprehenderit culpa duis. A rilru a buai em em a, a rilru a hah em em bawk a, a rilru a buai em em bawk a, a rilru a hah em em bawk a, a rilru a hah em em bawk a. A rilru a buai em em a, a rilru a hah em em bawk a, a rilru a buai em em bawk a, a rilru a hah em em bawk a, a rilru a hah em em bawk a, a rilru a hah em em bawk a.

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

Hman dan tur

Data attribute hmangin a ni

I topbar navigation-a awlsam taka scrollspy behavior dah belh data-spy="scroll"tur chuan, i spy duh element-ah dah la (most typically this would be the <body>). Tichuan Bootstrap component data-targeteng pawha parent element ID emaw class emaw nen attribute chu add ang che..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 hmangin

I CSS i dah hnuah position: relative;JavaScript hmangin scrollspy chu ko rawh:

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

ID target chinfel theih a ngai

Navbar link ah hian resolvable id target a awm tur a ni. Entirnan, a <a href="#home">home</a>chu DOM-a thil awm ang chi nen a inmil tur a <div id="home"></div>ni.

Non- :visibletarget element te chu ngaihthah a ni

:visiblejQuery ang lo target element te chu ngaihthah a ni ang a, an inmil nav item te chu highlight a ni ngai lovang.

Thiltih dan tur

.scrollspy('refresh')

DOM atanga elements dah belh emaw paih emaw nena inzawma scrollspy hman hian refresh method chu hetiang hian i ko a ngai ang:

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

.scrollspy('dispose')

Element pakhat scrollspy a tichhia.

Thil thlan theih a ni

Options chu data attribute emaw JavaScript hmangin pass theih a ni. Data attribute atan chuan option hming chu , ah hian append la data-, data-offset="".

Hming Lampang Hlawhchhamna Hrilhfiahna
offset a ni a zat 10 a ni Scroll awmna tur chhut hunah chunglam atanga offset tur pixels.

Thil thlengte

Thil thleng chi hrang hrang Hrilhfiahna
activate rawh.bs.scrollspy tih hi a ni He event hian scrollspy-in item thar a activate apiangin scroll element-ah a kap thin. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something…
})