in English

Сцроллспи

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

Како то ради

Сцроллспи има неколико захтева за правилно функционисање:

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

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

Пример у навигационој траци

Померајте област испод траке за навигацију и гледајте како се активна класа мења. Падајуће ставке ће такође бити истакнуте.

@дебео

Садржај чувара места за пример Сцроллспи-а. Имате најбољу архитектуру. Печати у пасош, она је космополита. Фино, свеже, жестоко, имамо га на закључаном. Никад нисам планирао да ћу те једног дана изгубити. Она ти једе срце. Твој пољубац је космички, сваки покрет је магија. Мислим на оне, мислим као да је она та. Поздрав драги, идемо на путовање. Само поседујте ноћ као што је 4. јул! Али радије се губите.

@мдо

Садржај чувара места за пример Сцроллспи-а. Јер она је муза и уметник. (Овако радимо) Дакле, желите да се играте магијом. Зато буди сигуран пре него што ми све даш. Ходам, ходам по ваздуху (вечерас). Прескочите разговор, чуо сам све, време је за шетњу.

једно

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>

Пример са угнежђеним нав

Сцроллспи такође ради са угнежђеним .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>

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

Сцроллспи такође ради са .list-groupс. Померајте област поред групе листе и гледајте како се активна класа мења.

Ставка 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атрибут са ИД-ом или класом родитељског елемента било које Боотстрап .navкомпоненте.

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>

Преко ЈаваСцрипт-а

Након што додате position: relative;свој ЦСС, позовите сцроллспи преко ЈаваСцрипт-а:

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

Потребни су решиви циљеви ИД-а

Везе за Навбар морају имати разлучиве циљеве ИД-а. На пример, <a href="#home">home</a>мора одговарати нечему у ДОМ-у као што је <div id="home"></div>.

Нециљни :visibleелементи су занемарени

Циљни елементи који нису :visibleпрема јКуери -ју биће занемарени и њихове одговарајуће навигационе ставке никада неће бити истакнуте.

Методе

.scrollspy('refresh')

Када користите сцроллспи у комбинацији са додавањем или уклањањем елемената из ДОМ-а, мораћете да позовете метод освежавања на следећи начин:

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

.scrollspy('dispose')

Уништава шпијун за померање елемента.

Опције

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

Име Тип Уобичајено Опис
офсет број 10 Пиксели за померање од врха приликом израчунавања положаја померања.
методом низ ауто Проналази у ком се одељку налази шпијунирани елемент. Одабраће autoнајбољи метод за добијање координата за померање. offsetкористиће јКуери метод помака да добије координате померања. positionкористиће јКуери метод положаја за добијање координата за померање.
циљ стринг | јКуери објекат | ДОМ елемент Одређује елемент за примену додатка Сцроллспи.

Догађаји

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