Липкие элементы

Оставляем элементы в верхней части области просмотра словно панель навигации липкая.

Применение

Чтобы создать элемент, который остается в верхней части области просмотра при прокрутке сайта, добавьте к этому элементу атрибут data-uk-sticky.

Пример

Задержится сверху

Разметка

<div data-uk-sticky>...</div>

Установить смещение *offset

Вы также можете расположить элемент ниже края области просмотра. Например, добавьте атрибут data-uk-sticky="{top:120}", чтобы создать поле *margin размером в 120 пикселей.

Пример

Прилипнет на 120px от самого края верхней области

Разметка

<div data-uk-sticky="{top:120}">...</div>

Добавить задержку/паузу

Чтобы добавить отсрочку к элементу, чтобы он становился липким только после прокрутки на указанное расстояние, необходимо добавить отрицательное смещение data-* атрибуту, например data-uk-sticky="{top:-200}".

Примечание Можно добавить анимацию из компонента Animation, чтобы липкий элемент появлялся плавно.

Пример

Прилипает сверху, но только после прокрутки 100px

Разметка

<div data-uk-sticky="{top:-200, animation: 'uk-animation-slide-top'}">...</div>

Отзывчивое поведение

Также имеется возможность отключить "липкое поведение" для разных устройств, добавив опцию точки останова в data-* атрибут, например data-uk-sticky="{media: 640}". Кроме того, вы можете использовать любой действующий медиа-запрос.

Разметка

<!-- Адаптивное поведение -->
<div data-uk-sticky="{media: 640}">
    ...
</div>

<!-- This is a media string using the min-width and orientation properties -->
<div data-uk-sticky="{media: '(min-width: 640px) and (orientation: landscape)'}">
    ...
</div>

Параметр boundary

Можно определить границу липкого элемента, установив параметр boundary. Это удерживает липкий элемент в пределах размеров граничного элемента.

Пример

Прикреплено к родительскому контейнеру
Липкий, пока виден граничный элемент
Boundary element

Разметка

<!-- Привязать к своему родительскому элементу -->
    <div data-uk-sticky="{boundary: true}">...</div>

    <!-- Привязать к любому элементу -->
    <div data-uk-sticky="{boundary: '#my-id'}">...</div>

Параметры JavaScript

Опция Значение По умолчанию Описание
top integer 0 Верхнее смещение когда залипание должно срабатывать
animation string '' Класс анимации UIkit
clsinit string uk-sticky-init Init class, когда элемент закреплен в первый раз
clsactive string uk-active Добавляется Active класс, когда элемент липкий
clsinactive string '' Класс добавляется, когда элемент не является липким
getWidthFrom string '' CSS-селектор, где можно получить ширину от липкого режима. По умолчанию это берет ширину от созданного элемента обертки.
media integer / string false Условие для активного статуса с шириной в виде целого числа (например, 640) или медиа-запроса CSS
target boolean false Убедитесь, что липкий элемент не находится над целевым элементом через location hash on dom-ready.
showup boolean false Показывать липкий элемент только при прокрутке вверх.
boundary mixed false Установите true привязки закрепления к родителю или селектора Css для привязки закрепления к определенному элементу.

Запуск элемента вручную

var sticky = UIkit.sticky(element, { /* options */ });

События

Имя Параметр Описание
active.uk.sticky event Элемент становится липким
inactive.uk.sticky event Элемент, выходящий из липкого режима