Прескокнете до главната содржина Прескокнете на навигацијата со документи
in English

Scrollspy

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

Како работи

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

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

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

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

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

Пример во navbar

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

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

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

Втор наслов

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

Трет наслов

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

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

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

Петти наслов

Ова е содржина на место за место за страницата 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

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

Точка 1-1

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

Точка 1-2

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

Точка 2

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

Точка 3

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

Точка 3-1

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

Точка 3-2

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

<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

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

Точка 2

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

Точка 3

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

Точка 4

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

<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...
})