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

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

Sticky: Руководство

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

<div uk-sticky></div>
Примечание Элементы в примерах на этой странице прикреплены до того момента, пока вы не прокрутите вниз до следующего заголовка, после чего они пропадают. Это было сделано специально, чтобы не загромождать экран всеми примерами липких элементов.
Прилипнет сверху 
<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="end: !.uk-height-large; offset: 60">Прилипнет сверху
    </div>
</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>
200px
100%
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-background-muted uk-height-large">
    <div class="uk-card uk-card-default uk-card-body uk-text-center uk-position-z-index" 
         uk-sticky="start: 200; end: !.uk-height-large; offset: 60; animation: uk-animation-slide-top">Анимация «Slide Top»
     </div>
</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>

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

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

Опция Значение По умолчанию Описание
position top, bottom top Позиция, в которой должен быть закреплен элемент.
start Length, CSS Selector 0 Начальное смещение.
Значение может быть в vh, % и px. Поддерживаются базовые математические операнды + и -.
Значение по умолчанию 0 означает, что верхняя граница элемента и верхняя граница области просмотра пересекаются.
Селектор установит начало нижней границы выбранного элемента и верхней границы элемента.
end Length, CSS Selector, Boolean false Конечное смещение.
Значение может быть в vh, % и px. Поддерживаются базовые математические операнды + и -.
Значение 0 означает, что верхняя граница элемента и верхняя граница области просмотра пересекаются, что может привести к тому, что элемент вообще не будет липким, если для опции start также установлено значение 0.
Селектор CSS установит конец нижней части выбранного элемента и нижней границы элемента. false заставит элемент закрепиться до конца страницы. true выбирает родительский элемент.
offset Length 0 Смещение, c которого прикрепляется Sticky. Значение может быть в vh, % и px. Поддерживаются базовые математические операнды + и -.
overflow-flip Boolean false Изменить «Закрепленную позицию», если элемент выходит за пределы области просмотра, и отключить прокрутку переполнения.
animation String false Анимация для использования, когда элемент становится липким.
cls-active String uk-active Активный класс.
cls-inactive String Неактивный класс.
show-on-up Boolean false Показывать липкие элементы только при прокрутке вверх.
media Number, String false Условие для активного состояния - ширина в виде целого числа (например, 640) или точка останова (например, @s, @m, @l, @xl) или любой допустимый медиа-запрос (например, (min-width: 900px)).
target-offset false, Length false Изначально убедитесь, что sticky-элемент не находится над элементом, на который ссылается страница через хэш местоположения. Смещение определяет, на каком расстоянии элемент будет находиться над ссылающимся элементом. false отключает это поведение.

JavaScript

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

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

UIkit.sticky(element, options);

События

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

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