Scrollspy

Автоматски ажурирајте ја навигацијата на Bootstrap или наведете ги компонентите на групата врз основа на позицијата на лизгање за да покаже која врска е моментално активна во приказот.

На оваа страница

Како работи

Scrollspy има неколку барања за правилно функционирање:

Мора да се користи на компонента за навигација на Bootstrap или група списоци .
Scrollspy бара position: relative;елементот што го шпионирате, обично <body>.
Сидра ( <a>) се потребни и мора да укажуваат на елемент со тоа id.

Кога успешно ќе се имплементира, вашата навигација или групата списоци соодветно ќе се ажурира, преместувајќи ја .activeкласата од една ставка во друга врз основа на нивните поврзани цели.

Контејнери со можност за лизгање и пристап до тастатура

Ако правите контејнер што може да се движи (освен <body>), погрижете се да имате heightсет и overflow-y: scroll;да го примените на него - заедно со a tabindex="0"за да обезбедите пристап до тастатурата.

Скролувајте ја областа под лентата за навигација и гледајте како се менува активната класа. Ставките од паѓачкото мени исто така ќе бидат означени.

Првиот наслов

Ова е содржина на место за место за страницата scrollspy. Забележете дека додека лизгате надолу по страницата, соодветната врска за навигација е означена. Се повторува низ примерот на компонентата. Овде продолжуваме да додаваме уште неколку примероци за да го нагласиме лизгањето и истакнувањето.

Втор наслов

Трет наслов

Четвртиот наслов

Петти наслов

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

Пример со вгнездена навигација

Scrollspy работи и со вгнездени .navс. .navАко е вгнездено .active, ќе бидат и неговите родители .active. Скролувајте ја областа до лентата за навигација и гледајте како се менува активната класа.

Точка 1

Точка 1-1

Точка 1-2

Точка 2

Точка 3

Точка 3-1

Точка 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>

Пример со листа-група

Scrollspy работи и со .list-groups. Скролувајте ја областа веднаш до групата со списоци и гледајте како се менува активната класа.

Точка 1 Точка 2 Точка 3 Точка 4

Точка 1

Точка 2

Точка 3

Точка 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>

Употреба

Преку атрибути на податоци

За лесно додавање на однесувањето на лизгање во навигацијата на горната лента, додајте data-bs-spy="scroll"го елементот што сакате да го шпионирате (најчесто ова е <body>). Потоа додадете го data-bs-targetатрибутот со ID или класа на родителскиот елемент на која било .navкомпонента Bootstrap.

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>

Преку JavaScript

Откако ќе го додадете position: relative;во вашиот CSS, повикајте го scrollspy преку JavaScript:

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

Потребни се решливи цели за ID

Врските на Navbar мора да имаат решливи цели за идентификација. На пример, <a href="#home">home</a>мора да одговара на нешто во DOM како <div id="home"></div>.

Невидливите целни елементи се игнорирани

Целните елементи што не се видливи ќе бидат игнорирани и нивните соодветни ставки за навигација никогаш нема да бидат означени.

Методи

освежи

Кога користите scrollspy во врска со додавање или отстранување на елементи од DOM, ќе треба да го повикате методот на освежување вака:

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

располага

Уништува запис на елементот. (Ги отстранува зачуваните податоци на елементот DOM)

getInstance

Статичен метод кој ви овозможува да го добиете примерот на scrollspy поврзан со елемент DOM

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

getOrCreateInstance

Статичен метод кој ви овозможува да го добиете примерот на scrollspy поврзан со елемент DOM или да создадете нов во случај да не е иницијализиран

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

Опции

Опциите може да се пренесат преку атрибути на податоци или JavaScript. За атрибути на податоци, додајте го името на опцијата на data-bs-, како во data-bs-offset="".

Име	Тип	Стандардно	Опис
`offset`	број	`10`	Пиксели за поместување од врвот при пресметување на позицијата на лизгање.
`method`	низа	`auto`	Открива во кој дел се наоѓа шпионираниот елемент. `auto`ќе го избере најдобриот метод за добивање координати за лизгање. `offset`ќе го користи `Element.getBoundingClientRect()`методот за да добие координати за лизгање. `position`ќе ги користи својствата `HTMLElement.offsetTop`и `HTMLElement.offsetLeft`за да добие координати за лизгање.
`target`	низа \| jQuery објект \| DOM елемент		Одредува елемент за примена на приклучокот Scrollspy.

Настани

Тип на настан	Опис
`activate.bs.scrollspy`	Овој настан се вклучува на елементот за лизгање секогаш кога ќе се активира нова ставка од scrollspy.

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

Scrollspy

Како работи

Контејнери со можност за лизгање и пристап до тастатура

Пример во navbar

Првиот наслов

Втор наслов

Трет наслов

Четвртиот наслов

Петти наслов

Пример со вгнездена навигација

Точка 1

Точка 1-1

Точка 1-2

Точка 2

Точка 3

Точка 3-1

Точка 3-2

Пример со листа-група

Точка 1

Точка 2

Точка 3

Точка 4

Употреба

Преку атрибути на податоци

Преку JavaScript

Потребни се решливи цели за ID

Невидливите целни елементи се игнорирани

Методи

освежи

располага

getInstance

getOrCreateInstance

Опции

Настани