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.

He page ah hian

A hnathawh dan

Scrollspy .activehian anchor ( ) elements-a class chu a toggle a, anchor’s -in a referenced <a>element chu view-ah a scroll a nih chuan. Scrollspy hi Bootstrap nav component emaw list group emaw nena hman dun a tha ber a, mahse tuna page-a anchor element awm zawng zawng nen pawh a thawk thei bawk ang. Hetah hian a hnathawh dan chu kan rawn tarlang e.idhref

A bul tan nan scrollspy hian thil pahnih a mamawh a: navigation, list group, emaw link set awlsam tak, chubakah scrollable container te pawh a awm bawk. Scrollable container chu the <body>emaw custom element set heightleh overflow-y: scroll.
Scrollable container-ah chuan add la data-bs-spy="scroll", data-bs-target="#navId"khawiah nge a kaihhnawih navigation-a navIdunique chu a awm. Keyboard hman theihna turin ida pawh telh ngei ang che .tabindex="0"
“Spied” container i scroll lai hian .activeclass pakhat a rawn dah belh a, a kaihhnawih navigation chhunga anchor link atang chuan a paih chhuak thin. Link te hian resolvable idtarget an nei tur a ni a, chuti lo chuan ngaihthah a ni. Entirnan, a <a href="#home">home</a>chu DOM a thil awm ang chi nen a inmil tur a ni<div id="home"></div>
Target element hmuh theih loh te chu ngaihthah a ni ang. A hnuaia Non-visible elements tih hi en la.

Entirna te

Navbar hnuaia area chu scroll la, active class inthlak dan chu en rawh. Dropdown menu hawng la, dropdown items te pawh highlight a nih lai pawh en bawk ang che.

Thupui hmasa ber

Hei hi scrollspy page atana placeholder content thenkhat a ni. Page i scroll down lai chuan navigation link dik tak chu a rawn lang chhuak tih hre reng ang che. Component entirnan a repeat vek a ni. Hetah hian scroll leh highlighting ngaih pawimawh nan entirnan copy engemaw zat kan dah belh zel a ni.

Thupui pahnihna

Thupui pathumna

Thupui palina

Thupui pangana

<nav id="navbar-example2" class="navbar bg-light px-3 mb-3">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading1">First</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading2">Second</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
        <li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
      </ul>
    </li>
  </ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-light p-3 rounded-2" tabindex="0">
  <h4 id="scrollspyHeading1">First heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading2">Second heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading3">Third heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading4">Fourth heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading5">Fifth heading</h4>
  <p>...</p>
</div>

Nested nav a ni

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.