Scrollspy

Автоматично оновлюйте навігацію Bootstrap або компоненти групи списків на основі позиції прокручування, щоб вказати, яке посилання зараз активне у вікні перегляду.

Як це працює

Scrollspy має кілька вимог для належної роботи:

Якщо ви створюєте наш JavaScript із вихідного коду, для цього потрібноutil.js .
Його потрібно використовувати в навігаційному компоненті або групі списку Bootstrap .
Scrollspy вимагає position: relative;від елемента, який ви шпигуєте, як правило, <body>.
Під час шпигування за елементами, відмінними від <body>, переконайтеся, що heightвстановлено та overflow-y: scroll;застосовано.
Якір ( <a>) є обов’язковим і має вказувати на елемент із цим id.

Після успішного впровадження ваша навігація або група списку оновлюватимуться відповідно, переміщуючи .activeклас від одного елемента до наступного на основі пов’язаних цілей.

Прокрутіть область під панеллю навігації та спостерігайте за зміною активного класу. Елементи спадного меню також будуть виділені.

@жирний

Вміст заповнювача для прикладу ScrollSpy. У вас найкраща архітектура. Штампи в паспорті, вона космополіт. Чудовий, свіжий, жорстокий, ми взяли його на замок. Ніколи не планував, що одного дня я втрачу тебе. Вона з'їдає твоє серце. Твій поцілунок космічний, кожен рух - магія. Я маю на увазі ті, я маю на увазі, ніби вона та сама. Вітаю коханих, вирушаймо в подорож. Просто володійте ніччю 4 липня! Але ви б краще пропали.

@mdo

Вміст заповнювача для прикладу ScrollSpy. Тому що вона муза і художник. (Ми так робимо) Отже, ви хочете пограти з магією. Тож будьте певні, перш ніж віддавати все мені. Я гуляю, гуляю по ефіру (сьогодні ввечері). Пропустіть розмову, все почули, час прогулятися.

один

Placeholder content for the scrollspy example. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

two

Placeholder content for the scrollspy example. It's time to bring out the big balloons. I'm walking, I'm walking on air (tonight). Yeah, we maxed our credit cards and got kicked out of the bar. Yo, shout out to all you kids, buying bottle service, with your rent money. I'm ma get your heart racing in my skin-tight jeans. If you get the chance you better keep her. Yo, shout out to all you kids, buying bottle service, with your rent money.

three

Вміст заповнювача для прикладу ScrollSpy. Якщо ти хочеш танцювати, якщо ти хочеш це все, ти знай, що я та дівчина, якій ти повинен подзвонити. Я б пройшов крізь шторм. Тож дозволь мені одягнути тебе в костюм на день народження. Той, що втік. Минулої п’ятниці ввечері, так, я думаю, що ми порушили закон, завжди говоримо, що зупинимося. Тому що вона трохи Йоко, і вона трохи "О ні". Я хочу, щоб щелепа відпала, очі вискочили, голова повернулася, тіло шоковано. Так, ми перевищили кредитні картки, і нас вигнали з бару.

І ще трохи вмісту-заповнювача, для хорошої міри.

<nav id="navbar-example2" class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#fat">@fat</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#mdo">@mdo</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#one">one</a>
        <a class="dropdown-item" href="#two">two</a>
        <div role="separator" class="dropdown-divider"></div>
        <a class="dropdown-item" href="#three">three</a>
      </div>
    </li>
  </ul>
</nav>
<div data-spy="scroll" data-target="#navbar-example2" data-offset="0">
  <h4 id="fat">@fat</h4>
  <p>...</p>
  <h4 id="mdo">@mdo</h4>
  <p>...</p>
  <h4 id="one">one</h4>
  <p>...</p>
  <h4 id="two">two</h4>
  <p>...</p>
  <h4 id="three">three</h4>
  <p>...</p>
</div>

Приклад із вкладеною навігацією

Scrollspy також працює з вкладеними .navs. Якщо вкладений .navє .active, його батьки також будуть .active. Прокрутіть область поруч із панеллю навігації та спостерігайте за зміною активного класу.

Пункт 1

Вміст заповнювача для прикладу ScrollSpy. Це відноситься до пункту 1. Підніме вас на милі високо, так високо, тому що в неї одна міжнародна посмішка. У моєму ліжку незнайомець, у голові стукотить. О ні. В іншому житті я змусив би тебе залишитися. Тому що я, я здатний на все. Одягаюся для свого коронного бою. Використовувався для того, щоб вкрасти спиртне у твоїх батьків і забратися на дах. Тон, загар підтягнутий і готовий, посиліть, бо він стає важким. Її кохання як наркотик. Мабуть, я забув, що маю вибір.

Пункт 1-1

Вміст заповнювача для прикладу ScrollSpy. Це відноситься до пункту 1-1. У вас найкраща архітектура. Штампи в паспорті, вона космополіт. Чудовий, свіжий, жорстокий, ми взяли його на замок. Ніколи не планував, що одного дня я втрачу тебе. Вона з'їдає твоє серце. Твій поцілунок космічний, кожен рух - магія. Я маю на увазі ті, я маю на увазі, ніби вона та сама. Вітаю коханих, вирушаймо в подорож. Просто володійте ніччю 4 липня! Але ви б краще пропали.

Пункт 1-2

Placeholder content for the scrollspy example. This one relates to the item 1-2. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

Item 2

Placeholder content for the scrollspy example. This one relates to item 2. Don't need apologies. There is no fear now, let go and just be free, I will love you unconditionally. Last Friday night. Don't be a shy kinda guy I'll bet it's beautiful. Summer after high school when we first met. 'Cause she's the muse and the artist. What? Wait. No, no, no, no. Thought that I was the exception.

Item 3

Placeholder content for the scrollspy example. This one relates to item 3. Word on the street, you got somethin' to show me, me. All this money can't buy me a time machine. Make it like your birthday everyday. So we hit the boulevard. You make me feel like I'm livin' a teenage dream, the way you turn me on Skip the talk, heard it all, time to walk the walk. Word on the street, you got somethin' to show me, me. It's no big deal, it's no big deal, it's no big deal.

Item 3-1

Placeholder content for the scrollspy example. This one relates to item 3-1. Baby do you dare to do this? This is no big deal. Yeah, you're lucky if you're on her plane. Just own the night like the 4th of July! Standing on the frontline when the bombs start to fall. So just be sure before you give it all to me.

Item 3-2

Вміст заповнювача для прикладу ScrollSpy. Це відноситься до пункту 3-2. Ви оригінальні, не підлягають заміні. Цілу ніч вони грають, твоя пісня. Каліфорнійські дівчата, ми безперечні. Як птах без клітки. Зараз немає страху, відпусти і просто будь вільним, я буду любити тебе безумовно. Я бачу написи на стіні. Ви можете подорожувати світом, але ніщо не наближається до золотого узбережжя.

<nav id="navbar-example3" class="navbar navbar-light bg-light">
  <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 ml-3 my-1" href="#item-1-1">Item 1-1</a>
      <a class="nav-link ml-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 ml-3 my-1" href="#item-3-1">Item 3-1</a>
      <a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
    </nav>
  </nav>
</nav>

<div data-spy="scroll" data-target="#navbar-example3" data-offset="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

Вміст заповнювача для прикладу групи списку Scrollspy. Це відноситься до пункту 1. Не потребую вибачень. Зараз немає страху, відпусти і просто будь вільним, я буду любити тебе безумовно. Вночі минулої п'ятниці. Не будь сором’язливим хлопцем, я можу поспорити, що це красиво. Літо після школи, коли ми вперше зустрілися. Тому що вона муза і художник. Що? Зачекайте. Думав, що я виняток.

Пункт 2

Вміст заповнювача для прикладу групи списку Scrollspy. Це стосується пункту 2. Так, вона танцює під свій ритм. О ні. Ти міг бути найкращим. Тому що, дитинко, ти феєрверк. Можливо, причина, чому всі двері закриті. Відкрийте своє серце і дайте йому початися. Такий шик, так, вона класика.

Пункт 3

Вміст заповнювача для прикладу групи списку Scrollspy. Це відноситься до пункту 3. Піднімаємося все вище і вище. Ніколи один без одного, ми уклали договір. Я йду по повітрю. Хтось сказав, що ти видалив татуювання. Тепер я ширяю, як метелик. Тон, загар підтягнутий і готовий, посиліть, бо він стає важким. Бо раз ти мій, коли ти мій. Ви просто повинні запалити світло і дозволити йому сяяти! Тож ми виїхали на бульвар. Ви коли-небудь відчували себе таким тонким. Я бачу це все, я бачу це зараз.

Пункт 4

Вміст заповнювача для прикладу групи списку Scrollspy. Це відноситься до пункту 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-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
  <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-spy="scroll"до елемента, який ви хочете стежити (найчастіше це буде <body>). Потім додайте data-targetатрибут з ідентифікатором або класом батьківського елемента будь-якого .navкомпонента Bootstrap.

body {
  position: relative;
}

<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

Через JavaScript

Після додавання position: relative;вашого CSS викличте scrollspy через JavaScript:

$('body').scrollspy({ target: '#navbar-example' })

Потрібні цілі ID, які можна розв’язати

Посилання на навігаційній панелі повинні мати ідентифікатори, які можна розпізнати. Наприклад, a <a href="#home">home</a>має відповідати чомусь у DOM, наприклад <div id="home"></div>.

Нецільові `:visible`елементи ігноруються

Цільові елементи, які не :visibleвідповідають jQuery , ігноруватимуться, а їхні відповідні елементи навігації ніколи не будуть виділені.

методи

`.scrollspy('refresh')`

Під час використання Scrollspy разом із додаванням або видаленням елементів із DOM вам потрібно буде викликати метод refresh таким чином:

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

`.scrollspy('dispose')`

Знищує scrollspy елемента.

Опції

Параметри можна передати через атрибути даних або JavaScript. Для атрибутів даних додайте назву опції до data-, як у data-offset="".

Ім'я	Тип	За замовчуванням	опис
зсув	номер	10	Пікселі для зміщення від верху під час обчислення положення прокручування.
метод	рядок	авто	Визначає, у якому розділі знаходиться підглянутий елемент. `auto`Вибирає найкращий метод отримання координат прокручування. `offset`використовуватиме метод зміщення jQuery для отримання координат прокручування. `position`використовуватиме метод позиції jQuery для отримання координат прокручування.
мета	рядок \| Об'єкт jQuery \| Елемент DOM		Визначає елемент для застосування плагіна Scrollspy.

Події

Тип події	опис
activate.bs.scrollspy	Ця подія спрацьовує на елементі scroll кожного разу, коли новий елемент активується scrollspy.

$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})

Scrollspy

Як це працює

Приклад на панелі навігації

@жирний

@mdo

один

two

three

Приклад із вкладеною навігацією

Пункт 1

Пункт 1-1

Пункт 1-2

Item 2

Item 3

Item 3-1

Item 3-2

Приклад зі списком-групою

Пункт 1

Пункт 2

Пункт 3

Пункт 4

Використання

Через атрибути даних

Через JavaScript

Потрібні цілі ID, які можна розв’язати

Нецільові :visibleелементи ігноруються

методи

.scrollspy('refresh')

.scrollspy('dispose')

Опції

Події

Нецільові `:visible`елементи ігноруються

`.scrollspy('refresh')`

`.scrollspy('dispose')`