in English

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

Scrollspy entirnan placeholder awmte chu. Architecture tha ber ber i hmu a. Passport stamp, cosmopolitan tak a ni. Fine, fresh, fierce, lock-ah kan hmu a. Ni khat chu ka hloh dawn che tih ka ruahman ngai lo. I thinlung a ei chhuak vek. I kiss chu cosmic a ni a, move tinreng chu magic a ni. Ka sawi tum chu a ni, ka sawi tum chu amah ang mai a ni. Hmangaihte chibai ka buk a che u. July ni 4 ang zan chu nei mai rawh! Mahse, khawhral mai mai i duh zawk.

@mdo a ni

Scrollspy entirnan placeholder awmte chu. 'Cause ani hi muse leh artist a ni. (Hetiang hian kan tih dan a ni) Chuvangin magic hmanga khelh i duh a ni. Chuvangin min pek vek hmain finfiah hmasa phawt mai rawh. Ka kal a, boruakah ka kal a (zanin hian). Thusawi chu skip la, hre vek rawh, kal hun kal hun.

pakhat

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 entirnan placeholder awmte chu. I zai duh chuan i duh vek a nih chuan i koh tur hmeichhia ka ni tih i hria a ni. Thlipui ka paltlang ang. Chuvangin i birthday suit ka ha ang che. A tlanchhuaktu chu. Nikum Friday zan khan, yeah dan kan bawhchhia niin ka hria, always say we’re gonna stop. 'Cause Yoko a ni deuh a, Tin, 'Oh no' a ni bawk. Ka duh ber chu jaw droppin’, mit poppin’, lu turnin’, body shockin’ a ni. Yeah, kan credit card te chu kan max a, bar atangin kan hnawtchhuak ta a ni.

Tin, placeholder content thenkhat dang pawh, tehfung tha tak atan.

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

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

Scrollspy entirnan placeholder awmte chu. This one relates to item 1. Mel sang tak, sang lutuk, 'cause she's got that one international smile. Ka khumah chuan mi hriat loh pakhat a awm a, ka lu-ah chuan pounding a awm a. Aw, ni lo. Nun dangah chuan ka awm tir ang che. ‘Cause kei, engkim ka thiam a ni. Ka lallukhum khumna indona atan chuan a suiting up. I nu leh pa zu rukbo a, inchung thlenga lawn thin. Tone, tan fit leh ready, turn up cause a gettin' heavy. A hmangaihna chu ruihhlo ang mai a ni. Duhthlan tur ka nei tih ka theihnghilh tawh niin ka ring.

Item 1-1-na a ni

Scrollspy entirnan placeholder awmte chu. Hei hi item 1-1 nen a inzawm a ni. Architecture tha ber ber i hmu a. Passport stamp, cosmopolitan tak a ni. Fine, fresh, fierce, lock-ah kan hmu a. Ni khat chu ka hloh dawn che tih ka ruahman ngai lo. I thinlung a ei chhuak vek. I kiss chu cosmic a ni a, move tinreng chu magic a ni. Ka sawi tum chu a ni, ka sawi tum chu amah ang mai a ni. Hmangaihte chibai ka buk a che u. July ni 4 ang zan chu nei mai rawh! Mahse, khawhral mai mai i duh zawk.

Item 1-2-na a ni

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 entirnan placeholder awmte chu. Hei hi item 3-2 nen a inzawm a ni. Original i ni a, thlak theih a ni lo. Zankhuain an play a, i hla. California nula te hi kan hnial theih loh. Cage nei lo sava ang maiin. Tunah chuan hlauhna a awm tawh lo, thlah la, zalên mai rawh, thuhnuairawlh takin ka hmangaih ang che. Bang chunga thuziak chu ka hmu thei. Khawvel i fang thei a mahse engmahin rangkachak tuipui kamah a hnaih lo.

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

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

Scrollspy list-group entirnan hmuna awmte. This one relates to item 1. Ngaihdam dil ngai suh. Tunah chuan hlauhna a awm tawh lo, thlah la, zalên mai rawh, thuhnuairawlh takin ka hmangaih ang che. Nikum Friday zan khan. Zakzum tak ni suh kinda guy I bet ang a mawi hle mai. High school zawh hnua kan inhmuh hmasak ber ṭum khan summer. 'Cause ani hi muse leh artist a ni. Engnge? Nghak. Keimah chu exception ka ni tih a ngaihtuah a.

Item 2-na a ni

Scrollspy list-group entirnan hmuna awmte. This one relates to item 2. Yeah, a beat angin a zai a. Aw, ni lo. A ropui ber pawh i ni thei ang. ‘Cause, baby, meipui i ni. Kawngkhar zawng zawng khar vek chhan pawh a ni mai thei. I thinlung chu hawng la, a bul tan mai rawh. So très chic, yeah, a classic hle mai.

Item 3-na a ni

Scrollspy list-group entirnan hmuna awmte. Hemi pakhat hi item 3 nen a inzawm a, kan kal sang chho zel a. Pakhat tel lovin pakhat mah, thuthlung kan siam a. Air-ah ka kal a. Mi pakhat chuan i tattoo i la chhuak tih a sawi a. Tunah chuan butterfly ang maiin ka float ta. Tone, tan fit leh ready, turn up cause a gettin' heavy. Cause vawi khat chu ka ta i ni a, vawi khat chu ka ta i ni. I light chu i ignite a, a eng chhuah tir mai tur a ni! Chuvang chuan boulevard chu kan pet ta a. I hre ngai em, chutiang paper thin angin i hria em. Ka hmu vek a, tunah ka hmu ta.

Item 4-na a ni

Scrollspy list-group entirnan hmuna awmte. This one relates to item 4. High school zawh hnua kan inhmuh hmasak ber ṭum nipui lai. Tunah chuan hlauhna a awm tawh lo, thlah la, zalên mai rawh, thuhnuairawlh takin ka hmangaih ang che. Sun-kissed skin so hot chuan i popsicle chu kan melt ang. He hmangaihna hian a levitate tir ang che.

<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.
tihdan hrui auto a ni Finds which section the spied element is in. autoscroll coordinate hmuh theihna tur kawng tha ber a thlang ang. offsetscroll coordinate hmuh nan jQuery offset method a hmang ang. positionscroll coordinate hmuh nan jQuery position method a hmang ang.
tum bik string | jQuery thil awmzia | DOM element a ni Scrollspy plugin hman tur element a tarlang.

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