Scrollspy

Automatiškai atnaujinkite Bootstrap naršymą arba sąrašo grupės komponentus pagal slinkties padėtį, kad nurodytumėte, kuri nuoroda šiuo metu aktyvi peržiūros srityje.

Šiame puslapyje

Kaip tai veikia

Scrollspy perjungia .activeklasę inkaro ( <a>) elementuose, kai elementas su prierašo idnuoroda hrefyra slenkamas į rodinį. „Scrollspy“ geriausia naudoti kartu su „Bootstrap“ navigacijos komponentu arba sąrašo grupe , tačiau jis taip pat veiks su bet kokiais prierašo elementais dabartiniame puslapyje. Štai kaip tai veikia.

Norėdami pradėti, scrollspy reikia dviejų dalykų: naršymo, sąrašų grupės arba paprasto nuorodų rinkinio ir slenkamo konteinerio. Slenkamas sudėtinis rodinys gali būti <body>arba pasirinktinis elementas su rinkiniu heightir overflow-y: scroll.
Slenkamajame sudėtiniame rodinyje pridėkite data-bs-spy="scroll"ir data-bs-target="#navId"kur navIdyra unikalus idsusietas naršymas. Taip pat būtinai įtraukite a tabindex="0", kad užtikrintumėte prieigą prie klaviatūros.
Kai slenkate „šnipinėjimo“ konteineriu, .activeklasė pridedama ir pašalinama iš susietos naršymo nuorodos. Nuorodos turi turėti išsprendžiamus idtikslus, priešingu atveju jų nepaisoma. Pavyzdžiui, <a href="#home">home</a>turi atitikti kažką DOM panašaus<div id="home"></div>
Tiksliniai elementai, kurie nematomi, bus ignoruojami. Žr. toliau esantį skyrių „Nematomi elementai “.

Pavyzdžiai

Slinkite po naršymo juosta esančia sritimi ir stebėkite aktyvios klasės pasikeitimą. Atidarykite išskleidžiamąjį meniu ir žiūrėkite, kad išskleidžiamieji elementai taip pat būtų paryškinti.

Pirma antraštė

Tai yra tam tikras „scrollspy“ puslapio rezervuotos vietos turinys. Atminkite, kad slenkant puslapiu žemyn, paryškinama atitinkama naršymo nuoroda. Tai kartojama visame komponento pavyzdyje. Čia nuolat pridedame dar keletą pavyzdžių, kad pabrėžtume slinkimą ir paryškinimą.

Antroji antraštė

Trečia antraštė

Ketvirta antraštė

Penkta antraštė

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

Įdėta navigacija

Scrollspy taip pat veikia su įdėtomis .navs. Jei įdėtas .navyra .active, jo tėvai taip pat bus .active. Slinkite šalia naršymo juostos esančia zona ir stebėkite, kaip keičiasi aktyvi klasė.