CSS свойство position: sticky
Элемент с 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;
}
В чем разница между свойствами 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, не поленитесь проверить его поддержку браузерами на текущий момент по caniuse.com. На момент написания статьи, безопаснее использовать свойство position: fixed для фиксирования элемента в нужном месте страницы. Однако следует помнить, что свойство fixed не позволит поочередно фиксировать несколько блоков. Он фиксирует только один блок, в отличии от sticky.
Начинающие разработчики часто жалуются, что они достаточно хорошо умею верстать и понимают базовые принципы программирования, но не могут самостоятельно написать не одной строчки кода на JavaScript. Чтобы не отвечать каждому лично, я специально написал статью "5 советов для начинающих разработчиков". Если вам по прежнему трудно справиться с программированием, тогда проще делегировать эту область разработки другим людям. Создать собственную веб-студию стало невероятно просто, когда расписан каждый шаг в моем видеокурсе.
-
Создано 13.01.2020 10:30:57
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.