in English

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

Съдържание на контейнер за пример за група от списък на Scrollspy. Това се отнася до точка 1. Няма нужда от извинения. Вече няма страх, пусни се и просто бъди свободен, ще те обичам безусловно. Миналата петък вечер. Не бъди срамежлив човек, обзалагам се, че е красиво. Лятото след гимназията, когато се срещнахме за първи път. Защото тя е музата и художникът. Какво? Изчакайте. Мислех, че съм изключение.

Точка 2

Съдържание на контейнер за пример за група от списък на Scrollspy. Това се отнася до точка 2. Да, тя танцува в собствения си ритъм. О, не. Можеше да си най-великият. Защото, скъпа, ти си фойерверк. Може би причината всички врати да са затворени. Отворете сърцето си и го оставете да започне. Толкова трès chic, да, тя е класика.

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

Използване

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

За да добавите лесно scrollspy поведение към вашата навигация в горната лента, добавете 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' })

Необходими са разрешими ИД цели

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

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

Целевите елементи, които не са :visibleспоред jQuery , ще бъдат игнорирани и съответните им навигационни елементи никога няма да бъдат маркирани.

Методи

.scrollspy('refresh')

Когато използвате scrollspy във връзка с добавяне или премахване на елементи от DOM, ще трябва да извикате метода за опресняване по следния начин:

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

.scrollspy('dispose')

Унищожава scrollspy на елемент.

Настроики

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

Име Тип По подразбиране Описание
изместване номер 10 Пиксели за изместване отгоре при изчисляване на позицията на превъртане.
метод низ Автоматичен Намира в кой раздел се намира шпионираният елемент. autoЩе избере най-добрия метод за получаване на координати за превъртане. offsetще използва jQuery offset метод, за да получи координати за превъртане. positionще използва метода за позициониране на jQuery, за да получи координати за превъртане.
цел низ | jQuery обект | DOM елемент Указва елемент за прилагане на приставката Scrollspy.

събития

Тип събитие Описание
activate.bs.scrollspy Това събитие се задейства върху елемента за превъртане всеки път, когато нов елемент се активира от scrollspy. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})