U gudub nuxurka muhiimka ah U gudub dukumentiyada navigation
in English

Scrollspy

Si toos ah u cusboonaysii Bootstrap navigation ama tax qaybaha kooxda ee ku salaysan booska rogid si aad u muujiso xidhiidhka hadda firfircoon ee muuqaalka.

Boggaan

Sida ay u shaqeyso

Scrollspy waxa ay leedahay shuruudo dhawr ah si uu si sax ah ugu shaqeeyo:

  • Waa in lagu isticmaalo qaybta Bootstrap nav ama kooxda liiska .
  • Scrollspy waxay u baahan tahay position: relative;walxaha aad basaasayso, badanaaba <body>.
  • Barroosinnada ( <a>) ayaa loo baahan yahay oo waa inay farta ku fiiqaan shay taas leh id.

Marka si guul leh loo fuliyo, nav-gaaga ama kooxdaada liiska ayaa u cusboonaysiin doona si waafaqsan, iyaga oo ka wareejinaya .activefasalka hal shay una guuri doona kan xiga iyadoo lagu saleynayo yoolalka la xiriira.

Weelasha la duubi karo iyo gelitaanka kiiboodhka

Haddii aad samaynayso weel la duubi karo (oo aan ahayn kan <body>), hubi inaad haysato heightset oo overflow-y: scroll;aad ku shubto- oo ay la socoto a tabindex="0"si loo hubiyo gelitaanka kiiboodhka.

Tusaale ahaan navbar

U rog aagga navbar ka hooseeya oo daawo isbeddelka fasalka firfircoon. Waxyaabaha hoos u dhaca ayaa sidoo kale la iftiimin doonaa.

Ciwaanka ugu horeeya

Tani waa qaar ka mid ah waxyaabaha ku jira boos-haynta bogga scrollspy. Ogsoonow marka aad hoos u dhaadhacdo bogga, xidhiidhka ku habboon ee hagitaanku waa la iftiimiyay. Waa lagu soo celceliyaa inta tusaale ahaan ka kooban tahay. Waxa aanu halkan ku soo kordhinaynaa xoogaa tusaale ah oo dheeraad ah si aanu u xoojino duubista iyo muujinta.

Ciwaanka labaad

Tani waa qaar ka mid ah waxyaabaha ku jira boos-haynta bogga scrollspy. Ogsoonow marka aad hoos u dhaadhacdo bogga, xidhiidhka ku habboon ee hagitaanku waa la iftiimiyay. Waa lagu soo celceliyaa inta tusaale ahaan ka kooban tahay. Waxa aanu halkan ku soo kordhinaynaa xoogaa tusaale ah oo dheeraad ah si aanu u xoojino duubista iyo muujinta.

Ciwaanka saddexaad

Tani waa qaar ka mid ah waxyaabaha ku jira boos-haynta bogga scrollspy. Ogsoonow marka aad hoos u dhaadhacdo bogga, xidhiidhka ku habboon ee hagitaanku waa la iftiimiyay. Waa lagu soo celceliyaa inta tusaale ahaan ka kooban tahay. Waxa aanu halkan ku soo kordhinaynaa xoogaa tusaale ah oo dheeraad ah si aanu u xoojino duubista iyo muujinta.

Ciwaanka afraad

Tani waa qaar ka mid ah waxyaabaha ku jira boos-haynta bogga scrollspy. Ogsoonow marka aad hoos u dhaadhacdo bogga, xidhiidhka ku habboon ee hagitaanku waa la iftiimiyay. Waa lagu soo celceliyaa inta tusaale ahaan ka kooban tahay. Waxa aanu halkan ku soo kordhinaynaa xoogaa tusaale ah oo dheeraad ah si aanu u xoojino duubista iyo muujinta.

Ciwaanka shanaad

Tani waa qaar ka mid ah waxyaabaha ku jira boos-haynta bogga scrollspy. Ogsoonow marka aad hoos u dhaadhacdo bogga, xidhiidhka ku habboon ee hagitaanku waa la iftiimiyay. Waa lagu soo celceliyaa inta tusaale ahaan ka kooban tahay. Waxa aanu halkan ku soo kordhinaynaa xoogaa tusaale ah oo dheeraad ah si aanu u xoojino duubista iyo muujinta.

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

Tusaale leh nav buul leh

Scrollspy sidoo kale waxay la shaqeysaa buul .navs. Haddii buul buul .navyahay .active, waalidkeed sidoo kale waxay ahaan doonaan .active. U rog aagga ku xiga navbar oo daawo isbeddelka fasalka firfircoon.

Shayga 1

Tani waa qaar ka mid ah waxyaabaha ku jira boos-haynta bogga scrollspy. Ogsoonow marka aad hoos u dhaadhacdo bogga, xidhiidhka ku habboon ee hagitaanku waa la iftiimiyay. Waa lagu soo celceliyaa inta tusaale ahaan ka kooban tahay. Waxa aanu halkan ku soo kordhinaynaa xoogaa tusaale ah oo dheeraad ah si aanu u xoojino duubista iyo muujinta.

Shayga 1-1

Tani waa qaar ka mid ah waxyaabaha ku jira boos-haynta bogga scrollspy. Ogsoonow marka aad hoos u dhaadhacdo bogga, xidhiidhka ku habboon ee hagitaanku waa la iftiimiyay. Waa lagu soo celceliyaa inta tusaale ahaan ka kooban tahay. Waxa aanu halkan ku soo kordhinaynaa xoogaa tusaale ah oo dheeraad ah si aanu u xoojino duubista iyo muujinta.

Shayga 1-2

Tani waa qaar ka mid ah waxyaabaha ku jira boos-haynta bogga scrollspy. Ogsoonow marka aad hoos u dhaadhacdo bogga, xidhiidhka ku habboon ee hagitaanku waa la iftiimiyay. Waa lagu soo celceliyaa inta tusaale ahaan ka kooban tahay. Waxa aanu halkan ku soo kordhinaynaa xoogaa tusaale ah oo dheeraad ah si aanu u xoojino duubista iyo muujinta.

Shayga 2

Tani waa qaar ka mid ah waxyaabaha ku jira boos-haynta bogga scrollspy. Ogsoonow marka aad hoos u dhaadhacdo bogga, xidhiidhka ku habboon ee hagitaanku waa la iftiimiyay. Waa lagu soo celceliyaa inta tusaale ahaan ka kooban tahay. Waxa aanu halkan ku soo kordhinaynaa xoogaa tusaale ah oo dheeraad ah si aanu u xoojino duubista iyo muujinta.

Shayga 3

Tani waa qaar ka mid ah waxyaabaha ku jira boos-haynta bogga scrollspy. Ogsoonow marka aad hoos u dhaadhacdo bogga, xidhiidhka ku habboon ee hagitaanku waa la iftiimiyay. Waa lagu soo celceliyaa inta tusaale ahaan ka kooban tahay. Waxa aanu halkan ku soo kordhinaynaa xoogaa tusaale ah oo dheeraad ah si aanu u xoojino duubista iyo muujinta.

Shayga 3-1

Tani waa qaar ka mid ah waxyaabaha ku jira boos-haynta bogga scrollspy. Ogsoonow marka aad hoos u dhaadhacdo bogga, xidhiidhka ku habboon ee hagitaanku waa la iftiimiyay. Waa lagu soo celceliyaa inta tusaale ahaan ka kooban tahay. Waxa aanu halkan ku soo kordhinaynaa xoogaa tusaale ah oo dheeraad ah si aanu u xoojino duubista iyo muujinta.

Shayga 3-2

Tani waa qaar ka mid ah waxyaabaha ku jira boos-haynta bogga scrollspy. Ogsoonow marka aad hoos u dhaadhacdo bogga, xidhiidhka ku habboon ee hagitaanku waa la iftiimiyay. Waa lagu soo celceliyaa inta tusaale ahaan ka kooban tahay. Waxa aanu halkan ku soo kordhinaynaa xoogaa tusaale ah oo dheeraad ah si aanu u xoojino duubista iyo muujinta.

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

Tusaale kooxda liiska

Scrollspy sidoo kale waxay la shaqeysaa .list-groups. U rog aagga ku xiga kooxda liiska oo daawo isbeddelka fasalka firfircoon.

Shayga 1

Tani waa qaar ka mid ah waxyaabaha ku jira boos-haynta bogga scrollspy. Ogsoonow marka aad hoos u dhaadhacdo bogga, xidhiidhka ku habboon ee hagitaanku waa la iftiimiyay. Waa lagu soo celceliyaa inta tusaale ahaan ka kooban tahay. Waxa aanu halkan ku soo kordhinaynaa xoogaa tusaale ah oo dheeraad ah si aanu u xoojino duubista iyo muujinta.

Shayga 2

Tani waa qaar ka mid ah waxyaabaha ku jira boos-haynta bogga scrollspy. Ogsoonow marka aad hoos u dhaadhacdo bogga, xidhiidhka ku habboon ee hagitaanku waa la iftiimiyay. Waa lagu soo celceliyaa inta tusaale ahaan ka kooban tahay. Waxa aanu halkan ku soo kordhinaynaa xoogaa tusaale ah oo dheeraad ah si aanu u xoojino duubista iyo muujinta.

Shayga 3

Tani waa qaar ka mid ah waxyaabaha ku jira boos-haynta bogga scrollspy. Ogsoonow marka aad hoos u dhaadhacdo bogga, xidhiidhka ku habboon ee hagitaanku waa la iftiimiyay. Waa lagu soo celceliyaa inta tusaale ahaan ka kooban tahay. Waxa aanu halkan ku soo kordhinaynaa xoogaa tusaale ah oo dheeraad ah si aanu u xoojino duubista iyo muujinta.

Shayga 4

Tani waa qaar ka mid ah waxyaabaha ku jira boos-haynta bogga scrollspy. Ogsoonow marka aad hoos u dhaadhacdo bogga, xidhiidhka ku habboon ee hagitaanku waa la iftiimiyay. Waa lagu soo celceliyaa inta tusaale ahaan ka kooban tahay. Waxa aanu halkan ku soo kordhinaynaa xoogaa tusaale ah oo dheeraad ah si aanu u xoojino duubista iyo muujinta.

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

Isticmaalka

Iyada oo loo marayo sifooyinka xogta

Si aad si fudud ugu darto habdhaqanka scrollspy to your topbar navigation, data-bs-spy="scroll"ku dar walxaha aad rabto in aad basaasto (inta badan tani waxay noqonaysaa <body>). Ka dib ku dar data-bs-targetsifada aqoonsiga ama fasalka xubinta waalidka ee qayb kasta oo Bootstrap .navah.

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>

Iyadoo loo marayo JavaScript

Ka dib markaad ku position: relative;darto CSS-gaaga, wac qoraalka qoraalka JavaScript:

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

Bartilmaameedyada aqoonsiga ee la xallin karo ayaa loo baahan yahay

Xidhiidhiyayaasha Navbar waa inay lahaadaan bartilmaameedyada id la xallin karo. Tusaale ahaan, <a href="#home">home</a>waa in uu u dhigmaa wax ku jira DOM sida <div id="home"></div>.

Qodobbada bartilmaameedka ah ee aan muuqan waa la iska indhatiray

Walxaha bartilmaameedka ah ee aan muuqan waa la iska indhatiray oo alaabtooda u dhigma weligood lama iftiimin doono.

Hababka

dib u cusboonaysii

Markaad isticmaalayso scrollspy iyadoo lala kaashanayo ku darista ama ka saarida walxaha DOM, waxaad u baahan doontaa inaad wacdo habka dib u cusboonaysiinta sida:

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

tuurid

Wuxuu baabi'iyaa rog-rogadka curiyaha. (Waxay tirtirtaa xogta kaydsan ee cunta DOM)

heliTusaale

Habka taagan kaas oo kuu ogolaanaya inaad hesho tusaalaha scrollspy ee la xidhiidha curiyaha DOM

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

HelOrCreateInstance

Habka taagan kaas oo kuu ogolaanaya inaad hesho tusaalaha duubista ee la xidhiidha walxaha DOM, ama abuurto mid cusub haddii aan la bilaabin

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

Ikhtiyaarada

Ikhtiyaarada waxaa lagu gudbi karaa sifada xogta ama JavaScript. Sifooyinka xogta, ku dheji magaca ikhtiyaarka data-bs-, sida ku jira data-bs-offset="".

Magaca Nooca Asal ahaan Sharaxaada
offset tirada 10 Pixels in laga bilaabo xagga sare marka la xisaabinayo booska rogid.
method xadhig auto Hesho qaybta qaybta la basaasay uu ku autojiro offsetwaxay isticmaali doontaa Element.getBoundingClientRect()habka si aad u hesho isku-dubbaridka. positionwaxay isticmaali doontaa guryaha HTMLElement.offsetTopiyo HTMLElement.offsetLeftguryaha si ay u helaan iskuduwayaasha duubista.
target xadhig | shayga jQuery | Qaybta DOM Wuxuu qeexayaa curiyaha lagu dabaqi karo Scrollpy plugin.

Dhacdooyinka

Nooca dhacdada Sharaxaada
activate.bs.scrollspy Dhacdadani waxay dab ku shid cunsuga duuduubka mar kasta oo shay cusub uu hawl galo duubista. 
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})