Страница с тестами. Компонент Липкие элементы : Sticky.


Stick to container; 50px offset
Sticky after 50vh; Scroll up if initially above paragraph below
Stick below container; animation
Stick until next paragraph
Sticky on scroll up; animation
Sticky after 300px scrolling; @media 640px

Возможное решение – говори чётко «про себя» или лучше вслух: «Липкое поведение, Липкое поведение». Это всё от неправильного образа жизни, я считаю. Хотя лучше реально на прилипающие элементы при прокручивании страницы сфокусироваться. Очень многие мои друзья в разговорах жалуются, что им не дает работать Липкое поведение или говорят, что накатил Липкое поведение – вроде все ясно, что делать, а работа не идет. Балерине, наверное, липкое поведение танцевать мешает.

Параметры JavaScript

Опция Значение По умолчанию Описание
top Number | % View Port Height |
CSS Selector
0 Верхнее смещение от того места, где должен быть прикреплен элемент.
bottom Boolean |
CSS Selector
false Нижнее смещение, пока элемент не должен прилипать.
(true: родительский элемент, с префиксом ! родительского селектора)
offset Number 0 Смещение, к которому прикрепляется Sticky.
animation String false Анимация для использования.
cls-active String uk-active Активный класс.
cls-inactive String '' Неактивный класс.
sel-target CSS Selector self Целевой элемент, к которому применяются активные и неактивные классы.
По умолчанию используется сам элемент.
width-element CSS Selector false Элемент, из которого Sticky должен получить "свою информацию" в активном режиме.
show-on-up Boolean false Показывать липкие элементы только при прокрутке вверх.
media Integer|String false Условие для активного состояния - ширина в виде целого числа
(например, 640) или точка останова (например, @s, @m, @l, @xl).
target-offset Boolean, Number false Сначала убедитесь, что Sticky не находится над целевым элементом с помощью хеша местоположения.