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 href="#home">home</a>павінен адпавядаць чаму-небудзь у DOM, напрыклад <div id="home"></div>.

Немэтавыя `:visible`элементы ігнаруюцца

Мэтавыя элементы, якія не адпавядаюць :visiblejQuery , будуць ігнаравацца, а іх адпаведныя элементы навігацыі ніколі не будуць вылучаны.

Метады

`.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, каб атрымаць каардынаты пракруткі. `position`будзе выкарыстоўваць метад пазіцыі jQuery, каб атрымаць каардынаты пракруткі.
мішэнь	радок \| Аб'ект jQuery \| Элемент DOM		Вызначае элемент для прымянення плагіна Scrollspy.

Падзеі

Тып падзеі	Апісанне
activate.bs.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')`