Загрузочный плагин прикрепить (расширенный)

Прикрепите плагин

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

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

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

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

При прокрутке вверх и вниз по странице меню всегда отображается и фиксируется в его положении.

Создание прикрепленного навигационного меню

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

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

Пример объяснено

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

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

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

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

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


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


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

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

Скроллспи & прикрепить

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

Полная ссылка на прикрепление начальной загрузки

Для полной ссылки на все методы и события прикрепления, перейдите на наш СсылкА на прикрепление Bootstrap JS.