Bootstrap 3 - ScrollSpy

В этом уроке Вы узнаете, как использовать плагин "scrollspy", отвечающий за слежением положения прокрутки, для создания навигации внутри страницы с помощью платформы Twitter Bootstrap.

Использования плагина "ScrollSpy" для создании навигации внутри страницы с помощью компонента Bootstrap "Nav"

Плагин "ScrollSpy" применяется на сайтах, веб-страницы которого содержат огромное количество материала и пользователю трудно в нём ориентироваться. В таком случае разработчик может создать разделы на каждой страницы и с помощью плагина ScrollSpy отслеживать, в каком разделе остановился посетитель. В итоге у нас получится навигационное меню (nav), у которого будут подсвечиваться пункты по мере прокрутки страницы, тем самым подсказывая посетителю, в каком разделе он находится. Подсвечивающиеся пункты можно реализовать посредством добавления класса .active к пунктам навигационного меню (nav), основываясь на плагине "ScrollSpy", который будет отслеживать нахождения посетителя в том или ином разделе. Также с помощью навигационного меню можно будет переходить к соответствующим разделам страницы.

Добавить функциональность плагина "Scrollspy" в навигационное меню можно с помощью атрибутов data или сценариев на языке JavaScript.

Использование плагина Scrollspy с помощью атрибутов data.

Для начала добавьте атрибут data-spy="scroll" к элементу, за которым вы хотите чтобы "scrollspy" наблюдал (как правило, это элемент body). Затем добавьте атрибут data-target с идентификатором (#id) или классом (.class) элемента-контейнера, который содержит навигационное меню (компонент nav). Для этого, чтобы это меню работало, вы должны иметь в основной части страницы разделы с идентификаторами, за которыми ScrollSpy будет следить, и они должны совпадать с атрибутом href пунктов навигационного меню, с помощью которых они ссылаются на эти разделы.

<body data-spy="scroll" data-target="#navbar-example">
  ...
  <!-- Навигационное меню -->
  <div class="navbar-example">
    <ul class="nav nav-tabs">
      <li class="active"><a href="#section1">1 Раздел</a></li>
      <li><a href="#section2">2 Раздел</a></li>
      <li><a href="#section3">3 Раздел</a></li>
    </ul>
  </div>

  <!-- Контент страницы, состоящий из разделов -->

  <h2 id="section1">1 Раздел</h2>
  <p><!--Содержание раздела --></p>
  
  <h4 id="section2">2 Раздел</h4>
  <p><!--Содержание раздела --></p>
  
  <h4 id="section3">3 Раздел</h4>
  <p><!--Содержание раздела --></p>

</body>

Использование плагина "Scrollspy" с помощью создания сценария на языке JavaScript.

Вы можете вызвать "scrollspy" не только с помощью атрибутов data, но и с помощью сценария на языке JavaScript. В сценарии необходимо задать элемент, за которым необходимо наблюдать (например: body), а затем вызвать функцию .scrollspy(). Функции необходимо задать параметр "target", значением которого будет идентификатор или класс контейнера, в который помещено навигационное меню.

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

Следующий пример демонстрирует использование плагина "scrollspy" с помощью атрибутов data:

<!-- Контент страницы -->

<div data-spy="scroll" data-target="#navbar-example" data-offset="0" style="height:200px;overflow:auto; position: relative; border: 1px solid black; padding: 10px;">
  
  <h4 id="windows">Windows</h4>
  <p><!--Содержание раздела --></p>
  
  <h4 id="linux">Linux</h4>
  <p><!--Содержание раздела --></p>
  
  <h4 id="android">Android</h4>
  <p><!--Содержание раздела --></p>

  <h4 id="ios">iOS</h4>
  <p><!--Содержание раздела --></p>

  <h4 id="wphone">Windows Phone</h4>
  <p><!--Содержание раздела --></p>
</div>

<!-- Навигационное меню -->
<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
  <div class="navbar-header">
    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-scrollspy">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>
  <div class="collapse navbar-collapse navbar-scrollspy">
    <!-- Пункты навигационного меню -->
    <ul class="nav navbar-nav">
      <li><a href="#windows">Windows</a></li
      <li><a href="#linux">Linux</a></li>
      <li><a href="#android">Android</a></li>
      <li><a href="#ios">iOS</a></li>
      <li><a href="#wphone">Windows Phone</a></li>
      </ul>
   </div>
</nav>

Windows

Lorem ipsum dolor sit amet. Amet, consectetur, adipisci velit, sed ut. Accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae. Fugit, sed quia voluptas assumenda est, qui dolorem ipsum, quia. Maxime placeat, facere possimus, omnis voluptas. Quasi architecto beatae vitae dicta sunt, explicabo ducimus, qui. Deserunt mollitia animi, id est eligendi optio. Facere possimus, omnis dolor repellendus iusto odio dignissimos ducimus. Sit, aspernatur aut officiis debitis aut reiciendis voluptatibus maiores alias consequatur. Ratione voluptatem sequi nesciunt neque. Magnam aliquam quaerat voluptatem accusantium doloremque laudantium, totam rem aperiam eaque.

Linux

Lorem ipsum dolor sit amet. Illum, qui blanditiis praesentium voluptatum deleniti atque. Excepturi sint, obcaecati cupiditate non recusandae. Perspiciatis, unde omnis dolor repellendus. Corrupti, quos dolores et voluptates repudiandae sint. Error sit voluptatem sequi nesciunt neque. Corrupti, quos dolores et dolorum fuga reprehenderit, qui ratione. Neque porro quisquam est, omnis iste natus error sit voluptatem accusantium doloremque. Accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae. Dolor sit, aspernatur aut officiis. Nisi ut aut rerum necessitatibus saepe. Iusto odio dignissimos ducimus, qui ratione voluptatem accusantium doloremque laudantium.

Android

Lorem ipsum dolor sit amet. Non provident, similique sunt in culpa, qui dolorem ipsum. Sunt, explicabo aperiam eaque ipsa, quae ab illo inventore. Quisquam est, qui iste natus error. Doloremque laudantium, totam rem aperiam eaque ipsa quae. Illum, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores eos. Debitis aut fugit, sed ut labore et aut rerum necessitatibus. Sunt in ea commodi autem vel illum, qui in culpa. Dolores eos, qui in ea commodi autem vel. Cum soluta nobis est et dolorum fuga nobis.

iOS

Lorem ipsum dolor sit amet. A sapiente delectus, ut perspiciatis, unde omnis dolor. Dignissimos ducimus, qui ratione voluptatem accusantium doloremque. Enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam. Harum quidem rerum facilis. Animi, id est laborum et quasi. Voluptatibus maiores alias consequatur aut odit aut fugit, sed quia. Rerum hic tenetur a sapiente. Optio, cumque nihil molestiae non recusandae vero. Non recusandae accusamus et molestiae consequatur. Laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis. Consequatur, vel eum iure reprehenderit, qui blanditiis praesentium.

Accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo. Possimus, omnis voluptas nulla vero eos et quasi architecto. Vitae dicta sunt, explicabo numquam. Blanditiis praesentium voluptatum deleniti atque corrupti quos. Quod maxime placeat, facere possimus, omnis dolor. Doloribus asperiores repellat. quas molestias. Cumque nihil molestiae non numquam. Minus id, quod maxime placeat, facere possimus. Velit esse, quam nihil molestiae consequatur, vel eum fugiat, quo voluptas. Itaque earum rerum facilis est et quas molestias. Eligendi optio, cumque nihil impedit, quo voluptas.

Windows Phone

Lorem ipsum dolor sit amet. Quod maxime placeat, facere possimus, omnis dolor repellendus iure reprehenderit. Fugit, sed ut enim ipsam voluptatem, quia consequuntur. Quis nostrum exercitationem ullam corporis suscipit laboriosam nisi. Adipisci velit, sed quia consequuntur. Non recusandae natus error sit voluptatem sequi nesciunt, neque porro. Earum rerum facilis est et iusto odio dignissimos ducimus, qui blanditiis praesentium. Corporis suscipit laboriosam, nisi ut et aut perferendis doloribus asperiores. Facere possimus, omnis dolor sit, aspernatur aut reiciendis voluptatibus maiores alias consequatur. Assumenda est, omnis iste natus error.

Lorem ipsum dolor sit amet. Sint et dolore magnam aliquam quaerat voluptatem accusantium doloremque laudantium totam. Soluta nobis est eligendi optio, cumque nihil. Id, quod maxime placeat, facere possimus, omnis dolor sit amet. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil. Exercitationem ullam corporis suscipit laboriosam. Voluptate velit esse, quam nihil molestiae consequatur. Quam nihil molestiae non numquam eius modi tempora incidunt, ut labore. Quod maxime placeat, facere possimus, omnis voluptas. Libero tempore, cum soluta nobis. Alias consequatur aut fugit, sed ut perspiciatis unde. Nihil impedit, quo voluptas assumenda. Voluptate velit esse, quam nihil impedit, quo voluptas nulla vero. Voluptatibus maiores alias consequatur aut fugit, sed quia consequuntur magni dolores. Consequatur aut reiciendis voluptatibus maiores alias consequatur aut reiciendis voluptatibus maiores alias. Facilis est laborum et harum quidem rerum necessitatibus. Officiis debitis aut perferendis doloribus asperiores repellat.

Параметр offset плагина "ScrollSpy"

У плагина "Scrollspy" есть один параметр offset, который можно установить с помощью атрибута data (например: data-offset="0") или с помощью JavaScript (например: $(".scroll-area").scrollspy({target: "#myNavbar", offset: 500})). Данный параметр предназначен для задания количества пикселей от верхнего края при расчете позиции прокрутки. По умолчанию, значения данного параметра равно 10.

Метод .scrollspy('refresh')

При вызове метода "scrollspy" через JavaScript Вам необходимо вызвать метод .refresh для обновления объектной модели документа (DOM). Это полезный метод, если какие-то элементы DOM изменились, т.е. если вы добавили или удалили некоторые элементы из объектной модели документа HTML. Нижеприведенный код использует этот метод:

$('body').each(function () {
  var $spy = $(this).scrollspy('refresh')
});
Следующий пример демонстрирует использование метода .scrollspy('refresh'):
<!-- Контент страницы, состоящий из разделов -->
<div id="mySampleText" data-spy="scroll" data-target="#myScrollspy2" data-offset="0" 
   style="height:200px;overflow:auto; position: relative;">
   <div class="section">
      <h4 id="html">HTML<small><a href="#" onclick="removeSection(this);">
         &times; Удалить эту секцию</a></small>
      </h4>
      <p>Содержимое раздела...</p>
   </div>
   <div class="section">
      <h4 id="css">CSS</h4>
      <p>Содержимое раздела...</p>
   </div>
   <div class="section">
      <h4 id="bootstrap3">Bootstrap 3<small><a href="#" onclick="removeSection(this);">
      &times; Удалить эту секцию</a></small>
      </h4>
      <p>Содержимое раздела...</p>
   </div>
</div>

<!-- Навигационное меню -->
<nav id="myScrollspy2" class="navbar navbar-default navbar-static" role="navigation">
   <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse" 
         data-target=".navbar-scrollspy2">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
      </button>
   </div>
   <div class="collapse navbar-collapse navbar-scrollspy2">
      <ul class="nav navbar-nav">
         <li class="active"><a href="#html">HTML</a></li>
         <li><a href="#css">CSS</a></li>
         <li><a href="#bootstrap3">Bootstrap 3</a></li>
      </ul>
   </div>
</nav>

<!-- Скрипт на языке JavaScript -->
<script type="text/javascript">
   $(function(){
   removeSection = function(e) {
      $(e).parents(".section").remove();
      $("#mySampleText").each(function () {
         var $spy = $(this).scrollspy('refresh')
      });
   }
   $("#myScrollspy2").scrollspy();
});
</script>

HTML × Удалить эту секцию

Lorem ipsum dolor sit amet. Voluptates repudiandae sint et molestiae consequatur, vel illum, qui voluptatibus maiores. Illo inventore veritatis et quas molestias excepturi sint obcaecati. Iusto odio dignissimos ducimus, qui ratione voluptatem. Veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut labore. Quidem rerum necessitatibus saepe eveniet, ut perspiciatis, unde omnis dolor repellendus itaque. Accusamus et accusamus et expedita distinctio. Accusantium doloremque laudantium, totam rem aperiam eaque. Culpa, qui in ea commodi autem. Numquam eius modi tempora incidunt, ut perspiciatis. Assumenda est, qui dolorem eum iure.

Lorem ipsum dolor sit amet. Delectus, ut aut reiciendis voluptatibus maiores alias. Porro quisquam est, qui ratione voluptatem sequi nesciunt, neque porro. Voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo. Ullam corporis suscipit laboriosam, nisi ut aut fugit. Nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut et dolorum. Similique sunt in ea commodi autem vel illum. Assumenda est, omnis dolor sit, amet, consectetur, adipisci velit, sed ut enim. Repudiandae sint et harum quidem rerum. Aut officiis debitis aut fugit, sed ut aliquid ex ea commodi. Reprehenderit, qui in culpa, qui dolorem ipsum. Molestiae consequatur, vel eum fugiat, quo voluptas assumenda est omnis. Consectetur, adipisci velit, sed ut aut odit aut rerum. Blanditiis praesentium voluptatum deleniti atque corrupti quos. Totam rem aperiam eaque ipsa, quae.

CSS

Lorem ipsum dolor sit amet. Eum iure reprehenderit, qui ratione voluptatem accusantium doloremque laudantium, totam. Aperiam eaque ipsa, quae ab illo inventore veritatis et accusamus. Accusamus et dolorum fuga amet, consectetur, adipisci velit, sed ut aliquid. Ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam. Possimus, omnis iste natus error sit voluptatem sequi nesciunt. Ex ea voluptate velit esse, quam nihil. Dolor repellendus alias consequatur aut reiciendis voluptatibus maiores alias. Itaque earum rerum hic tenetur a sapiente delectus, ut labore. Commodi autem vel illum.

Lorem ipsum dolor sit amet. Alias consequatur aut rerum facilis est et harum quidem rerum. Quia non numquam eius modi tempora incidunt. Necessitatibus saepe eveniet, ut labore et dolore magnam. Nobis est eligendi optio cumque. Quo minus id, quod maxime placeat, facere possimus omnis. Labore et dolorum fuga quidem rerum facilis est laborum et quas molestias. Ex ea commodi autem vel eum iure. Et quasi architecto beatae vitae dicta sunt. Similique sunt in ea voluptate velit esse, quam nihil molestiae. Similique sunt in ea commodi autem vel eum fugiat. Vel eum fugiat, quo minus id, quod maxime placeat, facere possimus. Aliquam quaerat voluptatem sequi nesciunt, neque porro.

Bootstrap 3 × Удалить эту секцию

Lorem ipsum dolor sit amet. Iusto odio dignissimos ducimus, qui ratione voluptatem accusantium. Sapiente delectus, ut aut perferendis doloribus asperiores repellat. autem vel illum. Velit, sed ut perspiciatis, unde omnis dolor repellendus maxime placeat. Soluta nobis est laborum et expedita distinctio. Adipisci velit, sed ut. Sunt, explicabo architecto beatae vitae dicta sunt, explicabo quibusdam. Harum quidem rerum hic tenetur a sapiente delectus. Odit aut rerum facilis est laborum. Voluptatem, quia voluptas sit, aspernatur aut perferendis doloribus. Nostrum exercitationem ullam corporis suscipit.

Lorem ipsum dolor sit amet. Vel illum, qui ratione voluptatem sequi. Minus id, quod maxime placeat, facere possimus, omnis iste natus error. Natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque. Illum, qui blanditiis praesentium voluptatum deleniti atque corrupti. Quas molestias excepturi sint, obcaecati cupiditate non provident similique. Obcaecati cupiditate non provident, similique sunt. Qui dolorem eum iure reprehenderit, qui blanditiis. Sunt, explicabo id est laborum et dolore magnam. Quasi architecto beatae vitae dicta sunt, explicabo esse, quam nihil. Sint et harum quidem rerum necessitatibus saepe eveniet, ut enim. Similique sunt in ea voluptate velit esse quam. Dignissimos ducimus, qui blanditiis praesentium voluptatum.

Событие activate.bs.scrollspy плагина "ScrollSpy"

Плагин Bootstrap scrollspy включает в себя событие activate.bs.scrollspy, которое предназначено для перехвата состояния плагина scrollspy. Это событие срабатывает каждый раз, когда новый элемент активируется с помощью плагина scrollspy, который эти элементы отслеживает. Например: $('#myScrollspy').on('activate.bs.scrollspy', function () { // do something… })

Следующий пример демонстрирует использование события activate.bs.scrollspy:

<body data-spy="scroll" data-target="#myScrollspy">

<!-- Навигационное меню -->
<nav id="myScrollspy" class="navbar navbar-default navbar-static" role="navigation">
   <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse" 
         data-target=".navbar-scrollspy">
         <span class="sr-only">Toggle navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
      </button>
   </div>
   <div class="collapse navbar-collapse navbar-scrollspy">
      <ul class="nav navbar-nav">
         <li class="active"><a href="#computer">Компьютер</a></li>
         <li><a href="#laptop">Ноутбук</a></li>
         <li><a href="#tablet">Планшет</a></li>
      </ul>
   </div>
</nav>

<!-- Основное содержимое -->
<div data-spy="scroll" data-target="#myScrollspy" data-offset="0" 
   style="height:200px;overflow:auto; position: relative;">
   <div class="section">
      <h4 id="computer">Компьютер<small><a href="#" onclick="removeSection(this);">
         &times; Удалить эту секцию</a></small>
      </h4>
      <p>Содержимое секции...</p>
   </div>
   <div class="section">
      <h4 id="laptop">Ноутбук<small></small></h4>
      <p>Содержимое секции...</p>
   </div>
   <div class="section">
      <h4 id="tablet">Планшет<small><a href="#" onclick="removeSection(this);">
         &times; Удалить эту секцию</a></small>
      </h4>
      <p>Содержимое секции...</p>
   </div>
 </div>

<!-- Сценарий на языке JavaScript -->
<script type="text/javascript">
   $(function(){
      removeSection = function(e) {
      $(e).parents(".section").remove();
      $('[data-spy="scroll"]').each(function () {
          var $spy = $(this).scrollspy('refresh')
      });
   }
   $("#myScrollspy").scrollspy();
   $('#myScrollspy').on('activate.bs.scrollspy', function () {
      var currentItem = $(".nav li.active > a").text();
      alert("Сейчас вы находитесь - " + currentItem);
   })
});
</script>

</body>

Навигационное меню



   Bootstrap 0    13060 0

Комментарии (4)

  1. Николай # 0
    Можно ли как-то сделать ScrollSpy с плавной прокруткой страницы, а не резкими переходами?
    1. Александр Мальцев # 0
      Вы наверно имели в виду Affix, т.к. ScrollSpy используется для отслеживания положения прокрутки. Да, к элементу, для которого применён Affix наблюдается такой эффект, который происходит в момент открепления элемента от его текущего положения при прокрутке (из static в fixed) и в момент закрепления его (из fixed в static). Это всё связано с разным значением свойства top в 2 его положениях (static и fixed).

      Николай, если это возможно на сайте, то установите одинаковые значения top, тогда скачка не будет. Или хотя уменьшите эту разницу насколько возможно, тогда этот скачок будет меньше.

      Но если это не возможно, тогда можно только сгладить этот эффект с помощью анимации. Например, если у вас элемент в static имеет «top: 80px», а в fixed имеет «top: 100px», то эти 20px ни куда не денешь. И у вас возникает резкий переход в 20px видимый глазу. Например, анимацию можно сделать с помощью jquery.scrollTo или чего-нибудь другого.
    2. Gleb # 0
      Здравствуйте, у меня следующий вопрос.

      Я так понял он закреплен в class=«nav» при прокрутке разделы подсвечиваются, у меня иная задача отключить подсветку разделов при прокрутке, но оставить при наведении. Каким образом можно реализовать?
      1. Александр Мальцев # 0
        Здравствуйте.
        В этом случае не используйте ScrollSpy.

      Вы должны авторизоваться, чтобы оставлять комментарии.