Компонент Липкие элементы : Sticky

Создавайте прилипающие элементы при прокручивании страницы. Заставьте элемент оставаться в верхней части окна просмотра; создайте прилипающую навигацию.

Руководство

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

<div uk-sticky></div>
  • Прилипнет сверху
  • <div class="uk-card uk-card-default uk-card-body" style="z-index: 990;" uk-sticky="bottom: #offset; offset: 60">Прилипнет сверху</div>
Примечание Элементы в примерах на этой странице прикреплены до того момента, пока вы не прокрутите вниз до следующего заголовка, после этого пропадают. Это было сделано специально, чтобы не загромождать экран всеми примерами липких элементов.

Offset

Вы можете расположить элемент ниже края области просмотра. Добавьте к атрибуту опцию offset и расстояние в пикселях.

<div uk-sticky="offset: 100"></div>
  • Прилипнет на 100px от края верхней области
  • <div class="uk-card uk-card-default uk-card-body" style="z-index: 980;" uk-sticky="offset: 100; bottom: #top-end">Прилипнет на 100px от края верхней области</div>

Top

Чтобы применить липкое поведение с задержкой, чтобы он становился липким только после прокрутки на указанное расстояние, добавьте к атрибуту top и значение, которое может быть определено как числом, представляющим смещение в пикселях, так и высотой области просмотра или селектором CSS.

<!-- Прилипание после прокрутки 100px -->
<div uk-sticky="top: 100"></div>

<!-- Прилипание после 100vh -->
<div uk-sticky="top: 100vh"></div>

<!-- Прилипает верхом к контейнеру -->
<div id="my-id">
    <div uk-sticky="top: #my-id"></div>
</div>
  • Прилипает сверху, но только после прокрутки 200px
    Липкий сверху, но под блоком
  • <div class="uk-child-width-1-2@s" uk-grid>
        <div>
            <div class="uk-card uk-card-default uk-card-body" style="z-index: 980;" uk-sticky="top: 200; bottom: #animation-end; offset: 60">Прилипает сверху, но только после прокрутки 200px</div>
        </div>
        <div>
            <div id="container-1" class="uk-background-muted uk-height-medium">
                <div class="uk-card uk-card-default uk-card-body" style="z-index: 980;" uk-sticky="top: #container-1; bottom: #animation-end; offset: 60">Липкий сверху, но под блоком</div>
            </div>
        </div>
    </div>
    <div class="uk-height-medium"></div>

Анимация при появлении

Добавьте анимацию из компонента «Анимация», чтобы липкий элемент появлялся плавно.

<div uk-sticky="animation: uk-animation-slide-top"></div>
  • Анимация «Slide Top»
  • <div class="uk-card uk-card-default uk-card-body" 
         uk-sticky="top: 100; 
                    animation: uk-animation-slide-top; 
                    bottom: #sticky-on-scroll-up-end; 
                    offset: 60
                    ">Анимация «Slide Top»
    </div>
    <div class="uk-height-medium"></div>

Липкий при прокрутке вверх

Вы можете отобразить липкий элемент только при прокрутке вверх, для экономии места. Вместе с анимацией это выглядит прикольно.

<div uk-sticky="show-on-up: true"></div>
  • Появление при прокрутке вверх
  • <div class="uk-card uk-card-default uk-card-body" uk-sticky="show-on-up: true; animation: uk-animation-slide-top; bottom: #bottom-end; offset: 60">
        Появление при прокрутке вверх
    </div>
    <div class="uk-height-medium"></div>

Прокрутите назад (вверх), чтобы увидеть прилипание при прокрутке вверх.


Bottom

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

<!-- Прилипает к нижней части родительского контейнера -->
<div>
    <div uk-sticky="bottom: true"></div>
</div>

<!-- Прилипает до указанного контейнера -->
<div uk-sticky="bottom: #my-id"></div>
<div id="my-id"></div>
  • Липкое состояние до следующего заголовка

    Следующий заголовок

  • <div uk-grid>
        <div class="uk-width-3-4@m">
            <div class="uk-card uk-card-default uk-card-body" uk-sticky="bottom: #container-title; offset: 60">
                Липкое состояние до <em>следующего</em> заголовка
            </div>
        </div>
        <div class="uk-width-1-1">
            <div class="uk-height-medium"></div>
        </div>
    </div>
    <h3 id="container-title">Следующий заголовок</h3>
  • Прилипает до нижней части родительского контейнера
  • <div uk-grid>
        <div class="uk-width-3-4@m">
            <div class="uk-background-muted uk-height-large">
                <div class="uk-background-muted uk-height-large">
                    <div class="uk-card uk-card-default uk-card-body" uk-sticky="bottom: true; offset: 60">Прилипает до нижней части родительского контейнера</div>
                </div>
            </div>
        </div>
    </div>

Отзывчивость

Можно отключить режим Липкие элементы для устройств различной ширины, применив опцию media к атрибуту и добавив соответствующую ширину области просмотра. Добавьте число в пикселях, например media: 640, или точку останова, например media: @m. Элемент будет прилипать от указанной ширины области просмотра и более, но не менее.

<div uk-sticky="media: 640"></div>

Опции компонента

При использовании компонента Липкие элементы к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.

Опция Значение По умолчанию Описание
top Number, viewport height, CSS selector 0 Верхнее смещение от того места, где должен быть прикреплен элемент.
bottom Boolean, CSS selector false The bottom offset until the element should stick. (true: parent element, prefixed with '!' a parent selector)
offset Number 0 Смещение, c которого прикрепляется Sticky.
animation String false Анимация для использования, когда элемент становится липким.
cls-active String uk-active Активный класс.
cls-inactive String '' Неактивный класс.
width-element CSS selector false The element the Sticky should get its width from in active mode.
show-on-up Boolean false Показывать "липкие" элементы только при прокрутке вверх.
media Integer, String false Условие для активного состояния - ширина в виде целого числа (например, 640) или точка останова (например, @s, @m, @l, @xl) или любой допустимый медиа-запрос (например, (min-width: 900px)).
target-offset Boolean, Number false Initially make sure that the Sticky is not over a targeted element via location hash.

JavaScript

Узнайте больше о компонентах JavaScript в фреймворке UIkit 3.

Инициализация

UIkit.sticky(element, options);

События

Следующие события будут инициированы для элементов компонента:

Название Описание
active Срабатывает после того, как элемент становится липким.
inactive Срабатывает после того, как элемент уже не липкий.
Документация
Компоненты