in English

Scrollspy

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

Како работи

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

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

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

Пример во navbar

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

@масти

Содржина на место за запис на примерот. Ја добивте најдобрата архитектура. Печати од пасош, таа е космополитска. Добро, свежо, жестоко, го добивме на заклучување. Никогаш не планирав дека еден ден ќе те изгубам. Таа ти го јаде срцето. Твојот бакнеж е космички, секое движење е магија. Мислам на оние, мислам како таа да е таа. Поздрав најблиски ајде да патуваме. Само поседувајте ја ноќта како на 4 јули! Но, повеќе би сакале да се потрошите.

@mdo

Содржина на место за запис на примерот. Затоа што таа е музата и уметникот. (Вака правиме ние) Па сакаш да си играш со магија. Затоа, бидете сигурни пред да ми го дадете сето тоа. Одам, одам на воздух (вечерва). Прескокнете го разговорот, слушнав сè, време е да прошетате.

еден

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

Содржина на место за запис на примерот. Ако сакаш да танцуваш, ако сакаш се, знаеш дека јас сум девојката што треба да ја повикаш. Ќе прошетам низ бурата. Па дозволете ми да ве воведам во вашиот роденденски костум. Тој што си отиде. Минатиот петок навечер, да, мислам дека го прекршивме законот, секогаш кажувајте дека ќе престанеме. Затоа што таа е малку на Јоко, и таа е малку на „О не“. Сакам вилицата да падне, окото да се испушти, главата да се врти, телото да шокира. Да, ги зголемивме нашите кредитни картички и бевме избркани од барот.

И уште некои содржини на место, за добра мерка.

<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 работи и со вгнездени .navс. .navАко е вгнездено .active, ќе бидат и неговите родители .active. Скролувајте ја областа до лентата за навигација и гледајте како се менува активната класа.

Точка 1

Содржина на место за запис на примерот. Ова се однесува на точка 1. Ве носи милји високо, толку високо, затоа што таа ја има таа меѓународна насмевка. Има странец во мојот кревет, има удирање во мојата глава. О, не. Во друг живот би те натерал да останеш. Затоа што јас сум способен за се. Одговарам за мојата крунисувачка битка. Се користи за кражба на алкохол од вашите родители и за качување на покривот. Тон, исончан одговара и готов, завртете го да стане тежок. Нејзината љубов е како дрога. Претпоставувам дека заборавив дека имам избор.

Точка 1-1

Содржина на место за запис на примерот. Ова се однесува на ставката 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

Содржина на место за запис на примерот. Ова се однесува на точка 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

Содржина на место за запис за примерот на групата за листа на скролачи. Ова се однесува на точка 1. Не треба извинување. Сега нема страв, пушти си и само биди слободен, ќе те сакам безусловно. Минатиот петок навечер. Не биди срамежлив тип, ќе се обложам дека е убаво. Лето после средно училиште кога првпат се запознавме. Затоа што таа е музата и уметникот. Што? Чекај. Мислев дека јас сум исклучок.

Точка 2

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

Точка 3

Содржина на место за запис за примерот на групата за листа на скролачи. Ова се однесува на точка 3. Одиме сè погоре и погоре. Никогаш едно без друго, склучивме пакт. Одам по воздух. Некој рече дека си ја отстранил тетоважата. Сега лебдам како пеперутка. Тон, исончан одговара и готов, завртете го да стане тежок. Затоа што еднаш си мој, еднаш си мој. Треба само да ја запалите светлината и да ја оставите да свети! Така удривме во булеварот. Дали некогаш се чувствувате, се чувствувате толку тенка хартија. Сето тоа го гледам, гледам сега.

Точка 4

Содржина на место за запис за примерот на групата за листа на скролачи. Ова се однесува на точка 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атрибутот со ID или класа на родителскиот елемент на која било .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

Врските на Navbar мора да имаат решливи цели за идентификација. На пример, <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')

Уништува скролање на елементот.

Опции

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

Име Тип Стандардно Опис
офсет број 10 Пиксели за поместување од врвот при пресметување на позицијата на лизгање.
метод низа автоматско Открива во кој дел се наоѓа шпионираниот елемент. autoќе го избере најдобриот метод за добивање координати за лизгање. offsetќе користи jQuery offset метод за да добие координати за лизгање. positionќе користи метод на jQuery позиција за да добие координати за лизгање.
цел низа | jQuery објект | DOM елемент Одредува елемент за примена на приклучокот Scrollspy.

Настани

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