Scrollspy

Hoʻohou ʻakomi i ka hoʻokele Bootstrap a i ʻole ka papa inoa o nā ʻāpana hui e pili ana i ke kūlana ʻōwili e hōʻike i ka loulou e hana nei i kēia manawa ma ka viewport.

Ma kēia ʻaoʻao

Pehea e hana ai

Loaʻa iā Scrollspy kekahi mau koi e hana pono ai:

Pono e hoʻohana ʻia ma kahi ʻāpana Bootstrap nav a i ʻole pūʻulu papa inoa .
Pono ʻo Scrollspy i position: relative;ka mea āu e mākaʻikaʻi nei, maʻamau ka <body>.
Pono nā heleuma ( <a>) a pono e kuhikuhi i kahi mea me kēlā id.

Ke hoʻokō maikaʻi ʻia, e hōʻano hou kāu nav a i ʻole pūʻulu papa inoa e like me ka neʻe ʻana o ka .activepapa mai kahi mea a i kekahi mea e pili ana i kā lākou mau pahuhopu pili.

ʻO nā ipu ʻōwili a me ka loaʻa ʻana o ka papa keyboard

Inā ʻoe e hana nei i kahi pahu scrollable (ma waho aʻe o ka <body>), e hōʻoia e loaʻa kahi heighthoʻonohonoho a overflow-y: scroll;hoʻopili iā ia-me ka ʻaoʻao tabindex="0"e hōʻoia i ke komo ʻana o ka keyboard.

E ʻōwili i ka ʻāpana ma lalo o ka navbar a nānā i ka loli o ka papa hana. E hōʻike ʻia nā mea hāʻule i lalo.

Poʻomanaʻo mua

ʻO kēia kekahi maʻiʻo placeholder no ka ʻaoʻao scrollspy. E hoʻomanaʻo i ka wā e kaomi ai ʻoe i lalo o ka ʻaoʻao, ua hōʻike ʻia ka loulou hoʻokele kūpono. Hoʻopuka hou ʻia i loko o ka laʻana ʻāpana. Hoʻohui mākou i kekahi kope kope hou aʻe ma ʻaneʻi e hoʻoikaika i ka ʻōwili ʻana a me ka hōʻailona.

Poʻomanaʻo ʻelua

Poʻomanaʻo ʻekolu

Poʻomanaʻo ʻehā

Poʻomanaʻo ʻelima

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

Laʻana me ka nested nav

Hana pū ʻo Scrollspy me nā nested .navs. Inā he pūnana .nav, ʻo .activekona mau mākua pū kekahi .active. E ʻōwili i ka ʻāpana e pili ana i ka navbar a nānā i ka hoʻololi ʻana o ka papa hana.

'ikamu 1

Kumuhana 1-1

'ikamu 1-2

'ikamu 2

'ikamu 3

Kumuhana 3-1

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

Laʻana me ka pūʻulu papa inoa

Hana pū ʻo Scrollspy me .list-groups. E ʻōwili i ka ʻāpana ma ka ʻaoʻao o ka pūʻulu papa inoa a nānā i ka hoʻololi ʻana o ka papa hana.

'ikamu 1 'ikamu 2 'ikamu 3 Kumuhana 4

'ikamu 1

'ikamu 2

'ikamu 3

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

Hoʻohana

Ma o nā hiʻohiʻona ʻikepili

No ka hoʻohui maʻalahi i ka hana scrollspy i kāu hoʻokele topbar, e hoʻohui data-bs-spy="scroll"i ka mea āu e makemake ai e kiu (ʻo ka mea maʻamau ʻo ia ka <body>). A laila e hoʻohui i ke data-bs-targetʻano me ka ID a i ʻole ka papa o ka mea makua o kekahi ʻāpana 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>

Ma o JavaScript

Ma hope o ka hoʻohui position: relative;ʻana i kāu CSS, e kāhea i ka scrollspy ma o JavaScript:

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

Pono nā pahuhopu ID hiki ke hoʻoholo

Pono nā loulou Navbar i nā pahuhopu id hiki ke hoʻoholo. No ka laʻana, <a href="#home">home</a>pono e pili i kekahi mea ma ka DOM e like me <div id="home"></div>.

Ua nānā ʻole ʻia nā mea i ʻike ʻole ʻia

E nānā ʻole ʻia nā mea i ʻike ʻole ʻia a ʻaʻole e hōʻike ʻia kā lākou mau mea nav pili.

Nā ʻano hana

hōʻano hou

Ke hoʻohana nei i ka scrollspy me ka hoʻohui a wehe ʻana paha i nā mea mai ka DOM, pono ʻoe e kāhea i ke ʻano hoʻomaha e like me:

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

e hoolei aku

Hoʻopau i ka scrollspy o kekahi mea. (Wehe i ka ʻikepili i mālama ʻia ma ka mea DOM)

getInstance

ʻO ke ala static e hiki ai iā ʻoe ke kiʻi i ka laʻana scrollspy pili me kahi mea DOM

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

getOrCreateInstance

ʻO ke ʻano static e hiki ai iā ʻoe ke kiʻi i ka laʻana scrollspy pili me kahi mea DOM, a i ʻole hana i kahi mea hou inā ʻaʻole i hoʻomaka ʻia.

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

Nā koho

Hiki ke hāʻawi ʻia nā koho ma o nā ʻikepili a i ʻole JavaScript. No nā ʻano ʻikepili, e hoʻopili i ka inoa koho i data-bs-, e like me ka data-bs-offset="".

inoa	ʻAno	Default	wehewehe
`offset`	helu	`10`	Pikika e hoʻoneʻe mai luna mai ke helu ʻana i ke kūlana o ka ʻōwili.
`method`	kaulahao	`auto`	E koho i `auto`ke ala maikaʻi loa e loaʻa ai nā hoʻonohonoho ʻōwili. `offset`e hoʻohana i ke `Element.getBoundingClientRect()`ala e loaʻa ai nā scroll coordinates. `position`e hoʻohana i ka `HTMLElement.offsetTop`a me `HTMLElement.offsetLeft`nā waiwai e kiʻi i nā hoʻonohonoho scroll.
`target`	kaula \| jQuery mea \| ʻElemu DOM		Hōʻike i ka mea e hoʻopili ai i ka plugin Scrollspy.

Nā hanana

ʻAno hanana	wehewehe
`activate.bs.scrollspy`	Hoʻomaka kēia hanana i ka mea scroll i ka wā e hoʻāla ʻia ai kahi mea hou e ka scrollspy.

var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})

Scrollspy

Pehea e hana ai

ʻO nā ipu ʻōwili a me ka loaʻa ʻana o ka papa keyboard

Laʻana ma navbar

Poʻomanaʻo mua

Poʻomanaʻo ʻelua

Poʻomanaʻo ʻekolu

Poʻomanaʻo ʻehā

Poʻomanaʻo ʻelima

Laʻana me ka nested nav

'ikamu 1

Kumuhana 1-1

'ikamu 1-2

'ikamu 2

'ikamu 3

Kumuhana 3-1

Kumuhana 3-2

Laʻana me ka pūʻulu papa inoa

'ikamu 1

'ikamu 2

'ikamu 3

Kumuhana 4

Hoʻohana

Ma o nā hiʻohiʻona ʻikepili

Ma o JavaScript

Pono nā pahuhopu ID hiki ke hoʻoholo

Ua nānā ʻole ʻia nā mea i ʻike ʻole ʻia

Nā ʻano hana

hōʻano hou

e hoolei aku

getInstance

getOrCreateInstance

Nā koho

Nā hanana