Scrollspy

Ṣe imudojuiwọn lilọ kiri Bootstrap ni adaṣe tabi ṣe atokọ awọn paati ẹgbẹ ti o da lori ipo yi lọ lati tọka iru ọna asopọ ti n ṣiṣẹ lọwọlọwọ ni wiwo wiwo.

Lori iwe yi

Bawo ni o ṣe n ṣiṣẹ

Scrollspy yi awọn .activekilasi on oran ( <a>) eroja nigbati awọn ano pẹlu iditọkasi nipa oran ti hrefwa ni yi lọ sinu wiwo. Scrollspy jẹ lilo ti o dara julọ ni apapo pẹlu paati Bootstrap nav tabi ẹgbẹ atokọ , ṣugbọn yoo tun ṣiṣẹ pẹlu eyikeyi awọn eroja oran ni oju-iwe lọwọlọwọ. Eyi ni bii o ṣe n ṣiṣẹ.

Lati bẹrẹ, scrollspy nilo ohun meji: lilọ kiri, ẹgbẹ atokọ, tabi ṣeto awọn ọna asopọ ti o rọrun, pẹlu apo eiyan ti o le yi lọ. Apoti ti o le yiyi le jẹ <body>nkan ti aṣa pẹlu ṣeto heightati overflow-y: scroll.
Lori apo eiyan ti o yi lọ, ṣafikun data-bs-spy="scroll"ati data-bs-target="#navId"nibo navIdni alailẹgbẹ idti lilọ kiri ti o somọ. Rii daju lati tun pẹlu kan tabindex="0"lati rii daju iraye si keyboard.
Bi o ṣe lọ kiri apoti “ami”, .activekilasi kan ni a ṣafikun ati yọkuro lati awọn ọna asopọ oran laarin lilọ kiri ti o somọ. Awọn ọna asopọ gbọdọ ni awọn ibi-afẹde ti o yanju id, bibẹẹkọ wọn ko bikita. Fun apẹẹrẹ, a <a href="#home">home</a>gbọdọ ba nkan ṣe ni DOM fẹ<div id="home"></div>
Awọn eroja ibi-afẹde ti ko han ni yoo kọju. Wo apakan Awọn eroja ti kii-han ni isalẹ.

Awọn apẹẹrẹ

Yi lọ si agbegbe ni isalẹ navbar ki o wo iyipada kilasi ti nṣiṣe lọwọ. Ṣii akojọ aṣayan silẹ ki o wo awọn ohun ti o wa silẹ jẹ afihan bi daradara.

Ibẹrẹ akọkọ

Eyi jẹ diẹ ninu awọn akoonu dimu fun oju-iwe scrollspy. Ṣe akiyesi pe bi o ṣe yi lọ si isalẹ oju-iwe naa, ọna asopọ lilọ kiri ti o yẹ jẹ afihan. O tun ṣe jakejado apẹẹrẹ paati. A tẹsiwaju lati ṣafikun ẹda apẹẹrẹ diẹ sii nibi lati tẹnumọ yiyi ati fifi aami si.

Akole keji

Akọle kẹta

Akọle kẹrin

Akọle karun

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

Ile iteeye nav

Scrollspy tun ṣiṣẹ pẹlu iteeye .navs. Ti itẹ-ẹiyẹ .navba jẹ .active, awọn obi rẹ yoo tun jẹ .active. Yi lọ si agbegbe lẹgbẹẹ navbar ki o wo iyipada kilasi ti nṣiṣe lọwọ.