Bootstrap Affix Plugin (Advanced)

Аффикс Plugin

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

Плагин переключает такое поведение и выключается (изменяет значение позиции CSS от статического к фиксированной), в зависимости от положения прокрутки.

Пример 1) прикрепленную Navbar:

Пример 2) прикрепленную боковой панели:

С помощью аффикса, когда мы прокрутки вверх и вниз страницы, меню всегда видна и заперли в его положении.

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

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

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

Пример Разъяснения

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

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

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

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

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


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


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

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

Scrollspy & Аффикс

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

Полное Bootstrap аффикс Reference

Для полного отнесение всех проставлять методы и события, перейдите на наш Bootstrap JS аффикс Reference .