Bootstrap 3 - Affix

На этом уроке мы познакомимся с плагином Bootstrap affix и научимся его добавлять к элементам веб-страницы.

Предназначение плагина Affix

Плагин Bootstrap Affix предназначен для "прикрепления" элемента веб-страницы к краям окна браузера. "Прикреплённый" элемент при прокрутке веб-страницы будет оставаться в определённом месте и находиться в поле зрения пользователя. Плагин affix позволяет также выключать это "прикрепление", т.е. работать в режиме переключателя (т.е. выключать или включать прикрепление элемента к краям окна браузера). Реализуется этот принцип посредством изменения значения CSS свойства position элемента веб-страницы из static в fixed.

Плагин affix очень часто применяют к социальным иконкам на сайте, которые при прокрутке веб-страницы всегда располагаются в определённом месте и доступны для просмотра пользователю.

Плагин affix можно использовать с помощью атрибутов Data или с помощью написания собственных сценариев на языке JavaScript . В том или другом случае вы должны предусмотреть CSS стили для позиционирования и настройки ширины вашего контента, к которому добавлен плагин affix.

Позиционирование Affix с помощью CSS

Плагин affix может переключаться между тремя классами, каждый из которых представляет определенное состояние: .affix, .affix-top, и .affix-bottom.

Принцип работы плагина Affix:

• Изначально плагин добавляет класс .affix-top или .affix-bottom, чтобы определить самое верхнее или самое нижнее положение элемента. На этом шаге CSS позиционирование элемента не требуется.
• При прокрутке страницы элемент смещается вместе с текстом, но его смещение ограничено значением атрибута data-offset-top-* или data-offset-bottom-*. После достижения этого ограничения плагин заменяет класс .affix-top или .affix-bottom на .affix и устанавливает элементу CSS свойство position со значением fixed (т.е. фиксированное позиционирование), которое "прикрепляет" элемент.
• В этой точке необходимо соответствующее свойство CSS top или bottom, чтобы определить позицию элемента, к которому добавлен плагин Affix, в области просмотра веб-страницы.

Добавление Affix с помощью атрибутов Data

Плагин Affix можно добавить к любому элементу веб-страницы с помощью атрибута data-spy="affix". После этого с помощью атрибута data-offset- установите величину смещения, которая определяет момент прикрепления элемента к верхнему или нижнему краю окна браузера.

<!-- Добавление Affix к элементу div с помощью атрибута data-spy="affix", и смещения с помощью атрибута data-offset-top -->
<div data-spy="affix" data-offset-top="20">
  ...
</div>

Добавление Affix с помощью JavaScript

Вы также можете добавить плагин Affix к элементам, используя сценарий на языке JavaScript. Для этого Вам необходимо вызвать для элемента веб-страницы, используя её идентификатор или имя класса, метод Bootstrap affix().

<!-- Сценарий на языке JavaScript -->
<script>
// #myAffix - идентификатор элемента к которому необходимо
// добавить Affix
$('#myAffix').affix({
  // установка смещений с помощью параметра offset
  offset: {
    top: 100,
    bottom: function () {
      // возвращает значение высоты
      // элемента веб-страницы с классом .footer
      return (this.bottom = $('.footer').outerHeight(true))
    }
  }
})
</script>
...
<!-- Добавление Affix к элементу div с помощью JavaScript -->
<div id="myAffix">
...
</div>

Параметры плагина Affix

Параметры могут быть установлены с помощью атрибутов Data или JavaScript. Для атрибутов Data добавьте имя параметра к data- (например: data-offset-top=100).

События плагина Affix

События для плагина Affix представлены в следующей таблице.

Пример кода с событием affixed.bs.affix

<script type="text/javascript">
$(document).ready(function(){
  $("#myNav").affix({
    offset: {
      top: 200
    }
  });
  $("#myNav").on('affixed.bs.affix', function(){
    alert("Меню навигации была прикреплена. Теперь она не прокручивается вместе со страницей.");
  });
});
</script>

<div class="container">
  <div class="row">
    <div class="col-xs-3">
      <div id="myNav" class="list-group">
        <a href="#section1" class="list-group-item">Раздел1</a>
        <a href="#section2" class="list-group-item">Раздел2</a>
        <a href="#section3" class="list-group-item">Раздел3</a>
      </div>
    </div>
    <div class="col-xs-9">
      <section id="section1">
        <h2>Раздел 1</h2>
        <p>Содержание раздела 1...</p>
      </section>
      <section id="section2">
        <h2>Раздел 2</h2>
        <p>Содержание раздела 2...</p>
      </section>
      <section id="section3">
        <h2>Раздел 3</h2>
        <p>Содержание раздела 3...</p>
      </section>
    </div>
  </div>
</div>

Пример совместного использования плагинов Affix и ScrollSpy

На следующем примере продемонстрирована возможность совместного использования плагинов ScrollSpy и Affix. Плагин ScrollSpy используется для отслеживания раздела, в котором сейчас находится пользователь и подсвечивания этого раздела в меню. А плагин Affix в этом примере используется для прикрепления этого меню при прокручивании страницы. Посмотреть пример совместного использования этих плагинов можно с помощью нижерасположенной ссылки.