Элемент с position: sticky отображается как относительно спозиционированный до тех пор, пока не пересечет заданную границу и тогда он ведет себя как position: fixed . При прокручивании, как только элемент достигает заданной границы, то прилипает к ней.
Элемент с position: sticky отображается как относительно спозиционированный до тех пор, пока не пересечет заданную границу и тогда он ведет себя как position: fixed. При прокручивании, как только элемент достигает заданной границы, то прилипает к ней.
Пример Sticky Position
Рассмотрим пример посложнее - с двумя липкими блоками. При прокрутке верхний липкий блок сразу фиксируется на нижней границе окна браузера. Когда мы доходим до второго липкого блока, то он встает на место первого блока. Первый блок просто исчезает из поля зрения. Сколько бы липких блоков мы не добавили, наверху всегда будет закрепляться только один блок, до которого пользователь докрутил.
// схематичная HTML разметка
<div class="sticky-first">
Sticky Position #1
</div>
<div>
<h3>
Несколько сгенерированных абзацев для демонстрации свойства position: sticky.
</h3>
<p>
рыба-текст
</p>
</div>
// базовые CSS свойства
body {
color: #000;
font-family: sans-serif;
font-size: 16px;
}
.sticky-first {
position: sticky;
top: 0;
left: 0;
background-color: #9b59b6;
color: #fff;
padding: 10px;
}
.sticky-second {
position: sticky;
top: 0;
left: 0;
background-color: #040d21;
color: #fff;
padding: 10px;
}
Пример position: fixed
В чем разница между свойствами sticky и fixed?
Элемент с позицией fixed, не следует за прокруткой, а всегда остается наверху страницы. Чаще всего на практике fixed применяется для фиксирования меню в верхней части окна браузера.
Пример Fixed Position
// схематичная HTML разметка
<div class="fixed">
Fixed Position
</div>
<div>
<h3>
Несколько сгенерированных абзацев для демонстрации свойства position: fixed.
</h3>
<p>рыба-текст</p>
</div>
// базовые CSS свойства
.fixed {
position: fixed;
top: 0
left: 0;
}
Пример position: sticky
Итоги
Прежде чем использовать свойство position: sticky, не поленитесь проверить его поддержку браузерами на текущий момент по caniuse.com. На момент написания статьи, безопаснее использовать свойство position: fixed для фиксирования элемента в нужном месте страницы. Однако следует помнить, что свойство fixed не позволит поочередно фиксировать несколько блоков. Он фиксирует только один блок, в отличии от sticky.
