прокрутка

Автоматически обновляйте компоненты навигации или группы списка Bootstrap в зависимости от положения прокрутки, чтобы указать, какая ссылка в настоящее время активна в области просмотра.

Как это работает

У Scrollspy есть несколько требований для правильной работы:

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

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

Прокрутите область под панелью навигации и посмотрите, как меняется активный класс. Выпадающие элементы также будут выделены.

@толстый

Содержимое-заполнитель для примера scrollspy. У тебя лучшая архитектура. Штампы в паспорте, она космополитка. Прекрасно, свежо, свирепо, мы засекли. Никогда не планировал, что однажды я потеряю тебя. Она съедает твое сердце. Твой поцелуй космический, каждое движение волшебное. Я имею в виду тех, я имею в виду, что она та самая. Приветствую вас, дорогие, давайте отправимся в путешествие. Просто владейте ночью, как 4 июля! Но ты предпочитаешь напиться.

@мдо

Содержимое-заполнитель для примера 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`элементы игнорируются

Целевые элементы, не :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 для получения координат прокрутки. `position`будет использовать метод положения jQuery для получения координат прокрутки.
цель	строка \| объект jQuery \| DOM-элемент		Указывает элемент для применения плагина Scrollspy.

События

Тип события	Описание
активировать.bs.scrollspy	Это событие срабатывает на элементе прокрутки всякий раз, когда новый элемент активируется scrollspy.

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

прокрутка

Как это работает

Пример в навигационной панели

@толстый

@мдо

один

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')`