Ruka hadi kwa yaliyomo kuu Ruka hadi kwenye urambazaji wa hati
in English

Scrollspy

Sasisha kiotomatiki urambazaji wa Bootstrap au orodhesha vipengee vya kikundi kulingana na nafasi ya kusogeza ili kuonyesha ni kiungo gani kinachotumika kwa sasa kwenye poti ya kutazama.

Katika ukurasa huu

Inavyofanya kazi

Scrollspy ina mahitaji machache ili kufanya kazi vizuri:

  • Ni lazima itumike kwenye kijenzi cha Bootstrap nav au kikundi cha orodha .
  • Scrollspy inahitaji position: relative;kipengee unachokipeleleza, kawaida <body>.
  • Nanga ( <a>) zinahitajika na lazima zielekeze kwenye kipengele kilicho na hicho id.

Inapotekelezwa kwa ufanisi, nav au kikundi chako cha orodha kitasasishwa ipasavyo, na kuhamisha .activedarasa kutoka kipengee kimoja hadi kingine kulingana na malengo yao yanayohusiana.

Vyombo vinavyoweza kusogezwa na ufikiaji wa kibodi

Ikiwa unatengeneza kontena inayoweza kusongeshwa (mbali na ile <body>), hakikisha kuwa una heightseti na overflow-y: scroll;unaitumia—pamoja na a tabindex="0"ili kuhakikisha ufikiaji wa kibodi.

Mfano katika navbar

Tembeza eneo chini ya upau wa urambazaji na utazame mabadiliko ya darasa amilifu. Vipengee kunjuzi vitaangaziwa pia.

Kichwa cha kwanza

Haya ni baadhi ya maudhui ya kishika nafasi kwa ukurasa wa kusogeza. Kumbuka kwamba unaposogeza chini ya ukurasa, kiungo kinachofaa cha kusogeza kinaangaziwa. Inarudiwa katika mfano wa sehemu. Tunaendelea kuongeza nakala zaidi ya mfano hapa ili kusisitiza kusogeza na kuangazia.

Kichwa cha pili

Haya ni baadhi ya maudhui ya kishika nafasi kwa ukurasa wa kusogeza. Kumbuka kwamba unaposogeza chini ya ukurasa, kiungo kinachofaa cha kusogeza kinaangaziwa. Inarudiwa katika mfano wa sehemu. Tunaendelea kuongeza nakala zaidi ya mfano hapa ili kusisitiza kusogeza na kuangazia.

Kichwa cha tatu

Haya ni baadhi ya maudhui ya kishika nafasi kwa ukurasa wa kusogeza. Kumbuka kwamba unaposogeza chini ya ukurasa, kiungo kinachofaa cha kusogeza kinaangaziwa. Inarudiwa katika mfano wa sehemu. Tunaendelea kuongeza nakala zaidi ya mfano hapa ili kusisitiza kusogeza na kuangazia.

Kichwa cha nne

Haya ni baadhi ya maudhui ya kishika nafasi kwa ukurasa wa kusogeza. Kumbuka kwamba unaposogeza chini ya ukurasa, kiungo kinachofaa cha kusogeza kinaangaziwa. Inarudiwa katika mfano wa sehemu. Tunaendelea kuongeza nakala zaidi ya mfano hapa ili kusisitiza kusogeza na kuangazia.

Kichwa cha tano

Haya ni baadhi ya maudhui ya kishika nafasi kwa ukurasa wa kusogeza. Kumbuka kwamba unaposogeza chini ya ukurasa, kiungo kinachofaa cha kusogeza kinaangaziwa. Inarudiwa katika mfano wa sehemu. Tunaendelea kuongeza nakala zaidi ya mfano hapa ili kusisitiza kusogeza na kuangazia.

<nav id="navbar-example2" class="navbar navbar-light bg-light px-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-offset="0" class="scrollspy-example" 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>

Mfano na nested nav

Scrollspy pia inafanya kazi na nested .navs. Ikiwa kiota kitawekwa .nav, .activewazazi wake pia watakuwa .active. Tembeza eneo karibu na upau wa urambazaji na utazame mabadiliko ya darasa yanayoendelea.

Kipengee cha 1

Haya ni baadhi ya maudhui ya kishika nafasi kwa ukurasa wa kusogeza. Kumbuka kwamba unaposogeza chini ya ukurasa, kiungo kinachofaa cha kusogeza kinaangaziwa. Inarudiwa katika mfano wa sehemu. Tunaendelea kuongeza nakala zaidi ya mfano hapa ili kusisitiza kusogeza na kuangazia.

Kipengee 1-1

Haya ni baadhi ya maudhui ya kishika nafasi kwa ukurasa wa kusogeza. Kumbuka kwamba unaposogeza chini ya ukurasa, kiungo kinachofaa cha kusogeza kinaangaziwa. Inarudiwa katika mfano wa sehemu. Tunaendelea kuongeza nakala zaidi ya mfano hapa ili kusisitiza kusogeza na kuangazia.

Kipengee 1-2

Haya ni baadhi ya maudhui ya kishika nafasi kwa ukurasa wa kusogeza. Kumbuka kwamba unaposogeza chini ya ukurasa, kiungo kinachofaa cha kusogeza kinaangaziwa. Inarudiwa katika mfano wa sehemu. Tunaendelea kuongeza nakala zaidi ya mfano hapa ili kusisitiza kusogeza na kuangazia.

Kipengee cha 2

Haya ni baadhi ya maudhui ya kishika nafasi kwa ukurasa wa kusogeza. Kumbuka kwamba unaposogeza chini ya ukurasa, kiungo kinachofaa cha kusogeza kinaangaziwa. Inarudiwa katika mfano wa sehemu. Tunaendelea kuongeza nakala zaidi ya mfano hapa ili kusisitiza kusogeza na kuangazia.

Kipengee cha 3

Haya ni baadhi ya maudhui ya kishika nafasi kwa ukurasa wa kusogeza. Kumbuka kwamba unaposogeza chini ya ukurasa, kiungo kinachofaa cha kusogeza kinaangaziwa. Inarudiwa katika mfano wa sehemu. Tunaendelea kuongeza nakala zaidi ya mfano hapa ili kusisitiza kusogeza na kuangazia.

Kipengee 3-1

Haya ni baadhi ya maudhui ya kishika nafasi kwa ukurasa wa kusogeza. Kumbuka kwamba unaposogeza chini ya ukurasa, kiungo kinachofaa cha kusogeza kinaangaziwa. Inarudiwa katika mfano wa sehemu. Tunaendelea kuongeza nakala zaidi ya mfano hapa ili kusisitiza kusogeza na kuangazia.

Kipengee 3-2

Haya ni baadhi ya maudhui ya kishika nafasi kwa ukurasa wa kusogeza. Kumbuka kwamba unaposogeza chini ya ukurasa, kiungo kinachofaa cha kusogeza kinaangaziwa. Inarudiwa katika mfano wa sehemu. Tunaendelea kuongeza nakala zaidi ya mfano hapa ili kusisitiza kusogeza na kuangazia.

<nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3">
  <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 ms-3 my-1" href="#item-1-1">Item 1-1</a>
      <a class="nav-link ms-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 ms-3 my-1" href="#item-3-1">Item 3-1</a>
      <a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
    </nav>
  </nav>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" tabindex="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>

Mfano na kikundi cha orodha

Scrollspy pia inafanya kazi na .list-groups. Tembeza eneo karibu na kikundi cha orodha na uangalie mabadiliko ya darasa yanayoendelea.

Kipengee cha 1

Haya ni baadhi ya maudhui ya kishika nafasi kwa ukurasa wa kusogeza. Kumbuka kwamba unaposogeza chini ya ukurasa, kiungo kinachofaa cha kusogeza kinaangaziwa. Inarudiwa katika mfano wa sehemu. Tunaendelea kuongeza nakala zaidi ya mfano hapa ili kusisitiza kusogeza na kuangazia.

Kipengee cha 2

Haya ni baadhi ya maudhui ya kishika nafasi kwa ukurasa wa kusogeza. Kumbuka kwamba unaposogeza chini ya ukurasa, kiungo kinachofaa cha kusogeza kinaangaziwa. Inarudiwa katika mfano wa sehemu. Tunaendelea kuongeza nakala zaidi ya mfano hapa ili kusisitiza kusogeza na kuangazia.

Kipengee cha 3

Haya ni baadhi ya maudhui ya kishika nafasi kwa ukurasa wa kusogeza. Kumbuka kwamba unaposogeza chini ya ukurasa, kiungo kinachofaa cha kusogeza kinaangaziwa. Inarudiwa katika mfano wa sehemu. Tunaendelea kuongeza nakala zaidi ya mfano hapa ili kusisitiza kusogeza na kuangazia.

Kipengee cha 4

Haya ni baadhi ya maudhui ya kishika nafasi kwa ukurasa wa kusogeza. Kumbuka kwamba unaposogeza chini ya ukurasa, kiungo kinachofaa cha kusogeza kinaangaziwa. Inarudiwa katika mfano wa sehemu. Tunaendelea kuongeza nakala zaidi ya mfano hapa ili kusisitiza kusogeza na kuangazia.

<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-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example" tabindex="0">
  <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>

Matumizi

Kupitia sifa za data

Ili kuongeza kwa urahisi tabia ya kusongesha kwenye urambazaji wa upau wako wa juu, ongeza data-bs-spy="scroll"kwenye kipengee unachotaka kupeleleza (kawaida hii itakuwa <body>). Kisha ongeza data-bs-targetsifa na kitambulisho au darasa la kipengele kikuu cha kipengele chochote cha Bootstrap .nav.

body {
  position: relative;
}

<body data-bs-spy="scroll" data-bs-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

Kupitia JavaScript

Baada ya kuongeza position: relative;katika CSS yako, piga scrollspy kupitia JavaScript:

var scrollSpy = new bootstrap.ScrollSpy(document.body, {
  target: '#navbar-example'
})

Vitambulisho vinavyoweza kutatuliwa vinahitajika

Viungo vya Upau wa Uelekezaji lazima viwe na malengo ya vitambulisho vinavyoweza kutatuliwa. Kwa mfano, <a href="#home">home</a>lazima ilingane na kitu kwenye DOM kama <div id="home"></div>.

Vipengele lengwa visivyoonekana vimepuuzwa

Vipengele vinavyolengwa ambavyo havionekani vitapuuzwa na vipengee vyake vinavyolingana nav havitaangaziwa kamwe.

Mbinu

furahisha

Unapotumia scrollspy kwa kushirikiana na kuongeza au kuondoa vitu kutoka kwa DOM, utahitaji kupiga njia ya kuburudisha kama hivyo:

var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
  bootstrap.ScrollSpy.getInstance(dataSpyEl)
    .refresh()
})

tupa

Huharibu scrollspy ya kipengele. (Huondoa data iliyohifadhiwa kwenye kipengele cha DOM)

getInstance

Njia tuli ambayo hukuruhusu kupata mfano wa kusogeza unaohusishwa na kipengee cha DOM

var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

getOrCreateInstance

Njia tuli ambayo hukuruhusu kupata mfano wa kusogeza unaohusishwa na kipengee cha DOM, au unda mpya ikiwa haikuanzishwa.

var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

Chaguo

Chaguzi zinaweza kupitishwa kupitia sifa za data au JavaScript. Kwa sifa za data, ongeza jina la chaguo kwa data-bs-, kama katika data-bs-offset="".

Jina Aina Chaguomsingi Maelezo
offset nambari 10 Pikseli za kurekebisha kutoka juu wakati wa kukokotoa nafasi ya kusogeza.
method kamba auto Hupata sehemu ambayo kipengele cha upelelezi kiko. autoitachagua njia bora zaidi ya kupata viwianishi vya kusogeza. offsetitatumia Element.getBoundingClientRect()njia kupata viwianishi vya kusogeza. positionitatumia HTMLElement.offsetTopna HTMLElement.offsetLeftmali kupata kuratibu za kusogeza.
target kamba | kitu cha jQuery | Kipengele cha DOM Inabainisha kipengele cha kutumia programu-jalizi ya Scrollspy.

Matukio

Aina ya tukio Maelezo
activate.bs.scrollspy Tukio hili huwashwa kwenye kipengele cha kusogeza wakati wowote kipengee kipya kinapowezeshwa na scrollspy. 
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})