Липкий

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

Использование

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

Пример

Stick to the top

Разметки

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

Определить смещение

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

Пример

Stick 100px below the top

Разметки

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

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

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

Пример

Stick at the top but only after 100px scrolling

Разметки

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

Адаптивный поведение

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

Разметки


                                <!-- This is basically a shortcode to define a min-width -->
                                <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 параметр. Это держит липкий элемент в пределах размеров граничных элементов.

Пример

Sticky bound to parent container
Sticky as long as bondary element is in view
Boundary element

Разметки


                                <!-- Bind sticky to its parent element -->
                                <div data-uk-sticky="{boundary: true}">...</div>

                                <!-- Bind sticky to any element -->
                                <div data-uk-sticky="{boundary: '#my-id'}">...</div>

JavaScript варианты

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

Инициализации элементов вручную

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

События

Имя Параметр Описание
active.uk.sticky event Элемент испачкаться
inactive.uk.sticky event Элемент оставляя липких режиме

Сделанное YOOtheme С любовью и кофеином.
под лицензией MIT.

UIkit