Липкий контейнер

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

Как использовать

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

<div uk-sticky></div>
  • Прилипнет к верхней части страницы
  • <div class="uk-card uk-card-default uk-card-body" style="z-index: 980;" uk-sticky="bottom: #offset">Прилипнет к верхней части страницы</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">Смещение на 100px вниз</div>
<!-- Прилипает после прокрутки 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">Прилипнет после прогрутки на 200px</div>
    </div>
    <div>
        <div id="container-1" class="uk-background-muted uk-height-medium" style="margin-bottom: 200px;">
            <div class="uk-card uk-card-default uk-card-body" style="z-index: 980;" uk-sticky="top: #container-1; bottom: #animation">Прилипнет сверху, в рамках родительского элемента</div>
        </div>
    </div>
</div>

Top

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

<!-- Sticks after 100px of scrolling -->
<div uk-sticky="top: 100"></div>

<!-- Sticks after 100vh -->
<div uk-sticky="top: 100vh"></div>

<!-- Sticks to the top of the container -->
<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">Прилипнет после прогрутки на 200px</div>
    </div>
    <div>
        <div id="container-1" class="uk-background-muted uk-height-medium" style="margin-bottom: 200px;">
            <div class="uk-card uk-card-default uk-card-body" style="z-index: 980;" uk-sticky="top: #container-1; bottom: #animation">Прилипнет сверху, в рамках родительского элемента</div>
        </div>
    </div>
</div>

Animation

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

<div uk-sticky="animation: uk-animation-slide-top"></div>
  • Animation Slide Top
  • <div class="uk-card uk-card-default uk-card-body" style="margin-bottom: 200px; z-index: 980;" uk-sticky="top: 100; animation: uk-animation-slide-top; bottom: #sticky-on-scroll-up">Animation Slide Top</div>

Sticky on scroll up

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

<div uk-sticky="show-on-up: true"></div>
  • Slide in on scroll up
  • <div class="uk-card uk-card-default uk-card-body" style="margin-bottom: 200px; z-index: 980;" uk-sticky="show-on-up: true; animation: uk-animation-slide-top; bottom: #bottom">Slide in on scroll up</div>

Bottom

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

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

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

    Второй заголовок

  • <div class="uk-child-width-1-2@s" uk-grid>
    <div>
        <div class="uk-background-muted uk-height-medium">
            <div class="uk-height-medium uk-background-muted">
                <div class="uk-card uk-card-default uk-card-body" style="z-index: 980;" uk-sticky="bottom: true">Срабатывает до нижней части родительского контейнера</div>
            </div>
        </div>
    </div>
    <div>
        <div>
            <div class="uk-card uk-card-default uk-card-body" style="z-index: 980;" uk-sticky="bottom: #container-2">Прилипает до следующего заголовка</div>
        </div>
    </div>
</div>

<h3 id="container-2">Второй заголовок</h3>

Responsive

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

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

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

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

Опция Значение По умолчанию Описание
top Number, viewport 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 '' Класс неактивности.
width-element CSS selector false Элемент Sticky должен получить свою ширину в активном режиме.
show-on-up Boolean false Показывать липкие элементы только при прокрутке вверх.
media Integer, String false Условие для активного состояния - ширина в виде целого числа (например, 640) или контрольной точки (например, @s, @m, @l, @xl). Допускаются медиа-запросы (например, (min-width: 900px)).
target-offset Boolean, Number false Изначально убедитесь, что Sticky не находится над целевым элементом через хэш местоположения.

JavaScript

Подробнее о компонентах JavaScript.

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

UIkit.sticky(element, options);

События

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

Имя Описание
active Срабатывает после того, как элемент становится липким.
inactive Срабатывает после того, как элемент больше не липкий.