Scrollspy cha Bootstrap 5

Scrollspy

Scrollspy inatumiwa kwa sababu yaUkisiaMakini ya hatua ya eneo ya kutupata taarifa ya kiingilio kwa kina kuzingatia kina za kilele.

Kuhakikisha Scrollspy

Mfano wa kuhakikisha Scrollspy:

Mfano

<!-- Eneo la kina -->
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">
<!-- Barani - <a> inatumiwa kwa sababu ya kufikia kina kwenye eneo la kina -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
  <ul class="navbar-nav">
    <li><a href="#section1">Makao ya 1</a></li>
    ...
</nav>
<!-- Makao ya 1 -->
<div id="section1">
  <h1>Makao ya 1</h1>
  <p>Tafadhali jaribu kusikia hii tovuti na kuona kina wakati una kusikia!</p>
</div>
...
</body>

Mfano wa kufikia

Mafanikio ya mtafiti

Kuwaambia data-bs-spy="scroll" Tukiongezea kwa sababu ya kina inayotumika kwa sababu ya kina (kama kina) ( <body> kina).

Kisha tukiongezea data-bs-target Mkaadhi, ina ujumbe wa id au kina cha orodha (.navbar) Kwa sababu hii ni kwa sababu ya kuhakikisha inaonekana kina na eneo la kina.

Tafadhali ingaa, kina inahitaji kufikia kina inayotumika kwa sababu ya kina kwenye orodha ya kina (<div id="section1"> Inamathuka <a href="#section1">)

Inahitaji kuchaguliwa data-bs-offset Inaonekana kama miundo inayohatarisha kwa sababu ya kina. Kwa kawaida, inaonekana kama 10 mita. Inahitaji kufikia kina.

Inahitaji ukingo wa kinaInahitaji CSS iliyotumiwa kwa sababu ya data-bs-spy="scroll" ya kina. Mkaadhi Inafaa kuwa na 'relative' kwa sababu ya kufungua kwa kawaida.