Плагин Bootstrap Affix (расширенный)

Плагин аффикса

Плагин Affix позволяет элементу прикрепляться (запираться) к области на странице. Это часто используется с навигационными меню или кнопками со значками социальных сетей, чтобы они «прилипали» к определенной области при прокрутке вверх и вниз по странице.

Плагин включает и выключает это поведение (меняет значение CSS positionfrom staticна fixed) в зависимости от положения прокрутки.

Пример 1) Прикрепленная панель навигации:

Пример 2) Прикрепленная боковая панель:

С Affix, когда мы прокручиваем страницу вверх и вниз, меню всегда видно и фиксируется на своем месте.

Как создать фиксированное меню навигации

В следующем примере показано, как создать горизонтальное фиксированное меню навигации:

В следующем примере показано, как создать вертикальное фиксированное меню навигации:

Объяснение примера

Добавьте data-spy="affix"к элементу, который вы хотите прикрепить.

При желании добавьте data-offset-top|bottomатрибут для расчета положения прокрутки.

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

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

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


• Прокрутка мимо прикрепленного элемента вызывает фактическое добавление — здесь плагин заменяет класс .affix-topили .affix-bottomна .affixкласс (наборы position:fixed). На этом этапе вы должны добавить CSS topили bottomсвойство, чтобы разместить прикрепленный элемент на странице.


• Если задано нижнее смещение, прокрутка мимо него заменяет .affixкласс на .affix-bottom. Поскольку смещения являются необязательными, для их установки требуется установить соответствующий CSS. В этом случае добавляйте position:absoluteпо мере необходимости.

В первом примере выше плагин Affix добавляет .affixкласс (position:fixed) к элементу <nav>, когда мы прокрутили 197 пикселей сверху. Если вы откроете пример, вы также увидите, что мы добавили в класс topсвойство CSS со значением 0 . .affixЭто делается для того, чтобы панель навигации всегда оставалась в верхней части страницы, когда мы прокрутили 197 пикселей сверху.

Scrollspy & Affix

Использование плагина Affix вместе с плагином Scrollspy :

Полный справочник по аффиксам Bootstrap

Полный справочник по всем методам и событиям аффиксов см. в нашем Справочнике по аффиксам Bootstrap JS .