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.

Boggan

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.

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, isku xirka hagidda ku habboon 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

Ciwaanka saddexaad

Ciwaanka afraad

Ciwaanka shanaad

<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 buulka .navs. Haddii buul ku .navyaal .active, waalidkeed sidoo kale waxay ahaan doonaan .active. U rog aagga ku xiga navbar oo daawo isbeddelka fasalka firfircoon.

Shayga 1

Shayga 1-1

Shayga 1-2

Shayga 2

Shayga 3

Shayga 3-1

Shayga 3-2

<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 Shayga 2 Shayga 3 Shayga 4

Shayga 1

Shayga 2

Shayga 3

Shayga 4

<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 inuu 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 `auto`jiro `offset`waxay isticmaali doontaa `Element.getBoundingClientRect()`habka si aad u hesho isku-dubbaridka. `position`waxay isticmaali doontaa guryaha `HTMLElement.offsetTop`iyo `HTMLElement.offsetLeft`guryaha si ay u helaan isku-dubaridka.
`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...
})

Scrollspy

Sida ay u shaqeyso

Weelasha la duubi karo iyo gelitaanka kiiboodhka

Tusaale ahaan navbar

Ciwaanka ugu horeeya

Ciwaanka labaad

Ciwaanka saddexaad

Ciwaanka afraad

Ciwaanka shanaad

Tusaale leh nav buul leh

Shayga 1

Shayga 1-1

Shayga 1-2

Shayga 2

Shayga 3

Shayga 3-1

Shayga 3-2

Tusaale kooxda liiska

Shayga 1

Shayga 2

Shayga 3

Shayga 4

Isticmaalka

Iyada oo loo marayo sifooyinka xogta

Iyadoo loo marayo JavaScript

Bartilmaameedyada aqoonsiga ee la xallin karo ayaa loo baahan yahay

Qodobbada bartilmaameedka ah ee aan muuqan waa la iska indhatiray

Hababka

dib u cusboonaysii

tuurid

heliTusaale

HelOrCreateInstance

Ikhtiyaarada

Dhacdooyinka