Компонент Липкие элементы Sticky
Создавайте прилипающие элементы при прокручивании страницы. Заставьте элемент оставаться в верхней части окна просмотра. Липкое поведение с задержкой. Анимация при появлении. Липкий при прокрутке вверх.
Руководство
Чтобы создать «липкий» элемент, который остается в верхней части области просмотра при прокрутке сайта, добавьте к этому элементу атрибут uk-sticky
.
<div uk-sticky></div>
Позиция
Расположение липких элементов
По умолчанию элемент прикрепляется к верхней части области просмотра.
Вы можете установить параметр position: bottom
, чтобы прикрепить его к нижней части области просмотра.
<div uk-sticky="position: bottom"></div>
- Sticky bottom
-
<div class="uk-background-muted uk-height-large"> <div class="uk-card uk-card-default uk-card-body uk-text-center uk-position-z-index" uk-sticky="position: bottom; end: !.uk-height-large">Sticky bottom </div> </div>
Start
Чтобы применить липкое поведение с задержкой, элемент становился липким только после прокрутки на указанное расстояние,
добавьте к атрибуту start
и значение, которое может быть определено как числом, представляющим смещение в пикселях,
так и высотой области просмотра или селектором CSS.
Значение может быть в vh, % и px. Поддерживаются базовые математические операнды + и -.
<!-- Прилипание после прокрутки 100px -->
<div uk-sticky="start: 100"></div>
<!-- Прилипает после прокрутки по высоте -->
<div uk-sticky="start: 100%"></div>
<!-- Прилипание после 100vh -->
<div uk-sticky="start: 100vh"></div>
<!-- Прилипает верхом к контейнеру -->
<div id="my-id">
<div uk-sticky="start: #my-id"></div>
</div>
- 100%20vhСелектор
-
<div class="uk-background-muted uk-height-large"> <div class="uk-child-width-1-3@m" uk-grid> <div> <div class="uk-card uk-card-default uk-card-body uk-text-center uk-position-z-index" uk-sticky="start: 100%; end: !.uk-height-large; offset: 60">100%</div> </div> <div> <div class="uk-card uk-card-default uk-card-body uk-text-center uk-position-z-index" uk-sticky="start: 20vh; end: !.uk-height-large; offset: 60">20vh</div> </div> <div> <div class="uk-card uk-card-default uk-card-body uk-text-center uk-position-z-index" uk-sticky="start: !.uk-height-large; end: !.uk-height-large + div; offset: 60">Селектор</div> </div> </div> </div> <div style="height: 250px"></div>
- Прилипает сверху, но только после прокрутки 200pxЛипкий сверху, но под блоком
-
<div class="uk-child-width-1-2@s" uk-grid> <div> <div class="uk-card uk-card-default uk-card-body uk-position-z-index" uk-sticky="start: 200; end: #end; offset: 60"> Прилипает сверху, но только после прокрутки 200px </div> </div> <div> <div id="container-10" class="uk-background-muted uk-height-large"> <div class="uk-card uk-card-default uk-card-body uk-position-z-index" uk-sticky="start: #container-10; end: #end; offset: 60"> Липкий сверху, но под блоком </div> </div> </div> </div> <div class="uk-height-large uk-background-secondary"></div>
End
Вы можете привязать липкое поведение к определенному элементу так, чтобы оно исчезало после прокрутки указанной точки на странице.
Чтобы применить offset к тому моменту, когда элемент должен перестать быть липким, добавьте параметр end
.
Значение может быть в vh, % и px. Поддерживаются базовые математические операнды + и -.
Значение 0
означает, что верхняя граница элемента и верхняя граница области просмотра пересекаются,
что может привести к тому, что элемент вообще не будет липким, если для параметра start
также установлено значение 0
.
Селектор CSS установит завершение на нижнюю границу выбранного элемента и нижнюю границу элемента.
false
заставит элемент закрепиться до конца страницы. true
выбирает родительский элемент.
<!-- Sticks until 200px scrolling -->
<div uk-sticky="end: 200"></div>
<!-- Sticks until scrolling the elements height -->
<div uk-sticky="end: 100%"></div>
<!-- Sticks until 20vh scrolling -->
<div uk-sticky="end: 20vh"></div>
<!-- Прилипает до указанного контейнера -->
<div uk-sticky="end: #my-id"></div>
<div id="my-id"></div>
<!-- Прилипает к нижней части родительского контейнера -->
<div>
<div uk-sticky="end: true"></div>
</div>
- Липкое состояние до следующего заголовка
Следующий заголовок
-
<div uk-grid> <div class="uk-width-3-4@m"> <div class="uk-card uk-card-default uk-card-body uk-position-z-index" uk-sticky="end: #end-container-title; offset: 60"> Липкое состояние до <em>следующего</em> заголовка </div> </div> <div class="uk-width-1-1"> <div class="uk-height-medium uk-background-muted"></div> </div> </div> <h3 id="end-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-position-z-index" uk-sticky="end: true; offset: 60"> Прилипает до нижней части родительского контейнера </div> </div> </div> </div> </div>
- 200px100%20vhСелектор
-
<div class="uk-background-muted uk-height-large"> <div class="uk-child-width-1-4@s" uk-grid> <div> <div class="uk-card uk-card-default uk-card-body uk-text-center uk-position-z-index" uk-sticky="end: 200; offset: 60">200px</div> </div> <div> <div class="uk-card uk-card-default uk-card-body uk-text-center uk-position-z-index" uk-sticky="end: 100%; offset: 60">100%</div> </div> <div> <div class="uk-card uk-card-default uk-card-body uk-text-center uk-position-z-index" uk-sticky="end: 20vh; offset: 60">20vh</div> </div> <div> <div class="uk-card uk-card-default uk-card-body uk-text-center uk-position-z-index" uk-sticky="end: !.uk-height-large; offset: 60">Селектор</div> </div> </div> </div>
Offset
Установить прилипание ниже верхнего края области просмотра
Вы можете расположить элемент ниже края области просмотра. Добавьте к атрибуту опцию offset
и расстояние в пикселях.
<div uk-sticky="offset: 100"></div>
- Прилипнет на 100px от края верхней области
-
<div class="uk-card uk-card-default uk-card-body uk-position-z-index" uk-sticky="offset: 100; end: #animation"> Прилипнет на 100px от края верхней области </div> <div class="uk-height-medium uk-background-muted"></div>
Анимация
Анимация при появлении
Добавьте анимацию из компонента «Анимация», чтобы липкий элемент появлялся плавно.
<div uk-sticky="animation: uk-animation-slide-top"></div>
- Анимация «Slide Top»
-
<div class="uk-card uk-card-default uk-card-body uk-position-z-index" uk-sticky="top: 100; animation: uk-animation-slide-top; end: #sticky-on-scroll-up; offset: 60 ">Анимация «Slide Top» </div> <div class="uk-height-medium"></div>
Липкий при прокрутке вверх
Вы можете отобразить липкий элемент только при прокрутке вверх, для экономии места. Вместе с анимацией это выглядит прикольно.
<div uk-sticky="show-on-up: true"></div>
- Появление при прокрутке вверх
-
<div class="uk-height-large uk-background-muted"> <div class="uk-card uk-card-default uk-card-body uk-text-center uk-position-z-index" uk-sticky="show-on-up: true; animation: uk-animation-slide-top; end: !.uk-height-large; offset: 60"> Появление при прокрутке вверх </div> </div>
Прокрутите назад (вверх), чтобы увидеть прилипание при прокрутке вверх.
Отзывчивость
При создании липкого меню, навигации, которая прилипает до указанной позиции,
может потребоваться использовать липкое поведение только для устройств с большими экранами.
Можно отключить режим Липкие элементы для устройств различной ширины
применив опцию media
к атрибуту и добавив соответствующую ширину области просмотра.
Добавьте число в пикселях, например media: 640
, или точку останова, например media: @m
или media: @l
.
Элемент будет прилипать от указанной ширины области просмотра и более, но не менее.
<div uk-sticky="media: 640"></div>
Oversized Content
Прикрепленный контент, размер которого превышает область просмотра, будет прокручиваться вниз и прикрепляться к нижней части области просмотра. Изменение направления прокрутки немедленно прокрутит липкое содержимое вверх и изменит липкое поведение, чтобы оно прикреплялось к верхней части области просмотра. Прокрутка вниз снова изменит поведение.
-
Sticky 1
Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо образ жизни.
Sticky 2
Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо образ жизни.
Sticky 3
Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо образ жизни.
Sticky 4
Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо образ жизни.
Заголовок 1
Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо образ жизни.
Заголовок 2
Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо образ жизни.
Заголовок 3
Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо образ жизни.
Заголовок 4
Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо образ жизни.
Заголовок 5
Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо образ жизни.
Заголовок 6
Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо образ жизни.
Заголовок 7
Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо образ жизни.
-
<div id="js-oversized" class="uk-child-width-1-2@s uk-position-relative uk-position-z-index" uk-grid> <div> <div class="uk-card uk-card-default uk-card-body uk-position-z-index" uk-sticky="end: #js-oversized"> <h3>Sticky 1</h3> <p>Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо образ жизни.</p> <h3>Sticky 2</h3> <p>Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо образ жизни.</p> <h3>Sticky 3</h3> <p>Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо образ жизни.</p> <h3>Sticky 4</h3> <p>Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо образ жизни.</p> </div> </div> <div> <div class="uk-background-muted uk-padding"> <h3>Заголовок 1</h3> <p>Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо образ жизни.</p> <h3>Заголовок 2</h3> <p>Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо образ жизни.</p> <h3>Заголовок 3</h3> <p>Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо образ жизни.</p> <h3>Заголовок 4</h3> <p>Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо образ жизни.</p> <h3>Заголовок 5</h3> <p>Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо образ жизни.</p> <h3>Заголовок 6</h3> <p>Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо образ жизни.</p> <h3>Заголовок 7</h3> <p>Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо образ жизни.</p> </div> </div> </div>
Overflow Flip
Опция overflow-flip
отключает липкое поведение для содержимого большого размера.
Вместо этого он переворачивает липкое положение только в том случае, если элемент больше, чем окно просмотра.
Изменение направления прокрутки не повлияет на закрепленное положение.
Вместе с опциями start
и end
можно добиться двух изящных липких эффектов.
Перекройте элемент следующим содержимым или откройте его благодаря предыдущему содержимому.
<!-- Раздел будет обёрнут следующим разделом -->
<div uk-sticky="overflow-flip: true; end: 100%"></div>
<div>Какой-то раздел.</div>
<!-- Раздел будет раскрыт предыдущим разделом -->
<div uk-sticky="position: bottom; overflow-flip: true; start: -100%; end: 0"></div>
- Будет перекрыт
overflow-flip: true
end: 100%Обёртка.
Накладывается поверх предыдущего раздела.
Открывает, выпускает следующий раздел.position: bottom
overflow-flip: true
start: -100%
end: 0 -
<div class="uk-position-relative uk-position-z-index"> <div class="uk-background-secondary uk-padding uk-flex uk-flex-center uk-flex-middle uk-text-center uk-light uk-height-medium uk-position-z-index-negative" uk-sticky="overflow-flip: true; end: 100%; offset: 60"> Будет перекрыт<br> overflow-flip: true<br> end: 100% </div> <div class="uk-background-muted uk-padding uk-flex uk-flex-center uk-flex-middle uk-text-center uk-height-medium"> <div> <em>Обёртка</em>.<br> Накладывается поверх предыдущего раздела.<br> Открывает, <i>выпускает</i> следующий раздел. </div> </div> <div class="uk-background-secondary uk-padding uk-flex uk-flex-center uk-flex-middle uk-text-center uk-light uk-height-medium uk-position-z-index-negative" uk-sticky="position: bottom; overflow-flip: true; start: -100%; end: 0"> position: bottom<br> overflow-flip: true<br> start: -100%<br> end: 0 </div> </div>
JavaScript
Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.
Инициализация
UIkit.sticky(element, options);
События
Следующие события будут инициированы для элементов компонента «Sticky»:
Имя события | Описание |
---|---|
active |
Срабатывает после того, как элемент становится липким. |
inactive |
Срабатывает после того, как элемент уже не липкий. |