Четыре года назад Эрик Бидельман написал довольно интересную запись в блоге о том, что position: sticky попала в WebKit , который в то время был движком Chrome (а также многих других браузеров, включая Safari). Год спустя, к большому ужасу веб-разработчиков, мы удалили position:sticky из Chrome, потому что «текущая реализация не разработана таким образом, чтобы хорошо интегрироваться с существующей системой прокрутки и композиции».
Мы всегда хотели вернуть его в Chrome, поскольку ошибка гласила: «Как только мы приведем в порядок нашу систему прокрутки и компоновки, мы должны вернуться к position: sticky и реализовать эту функцию таким образом, чтобы она хорошо интегрировалась с остальная часть двигателя». Над мета-багами , отслеживающими реализацию, работали с 2013 года.
Хорошая новость заключается в том, что в Chrome 56 (в настоящее время бета-версия по состоянию на декабрь 2016 г., стабильная версия — в январе 2017 г.) position: sticky теперь снова в Chrome.
Что такое позиция: липкая?
Чтобы добраться сюда, потребовалось некоторое время, так почему же я в восторге от этого?
position:sticky — это атрибут позиционирования CSS, который позволяет вам закрепить элемент в области просмотра (т. е. привязать его к верхней части экрана), но только тогда, когда его родительский элемент виден в области просмотра и находится в пределах порогового значения. Если он не привязан к области просмотра, элемент будет вести себя так, как будто это position: relative . Это очень приятное и простое дополнение к платформе, которое устраняет необходимость использования JavaScript в обработчике событий onscroll только для фиксации элемента в верхней части области просмотра.
Вот как это выглядит в моем блоге . Это позволяет мне держать заголовок текущего раздела вверху экрана, пока вы читаете мои довольно длинные и утомительные статьи :\
Чтобы реализовать эту функцию, укажите, что атрибут position должен иметь значение sticky для элемента, который вы хотите закрепить. Кроме того, вы также можете добавить смещение в том месте, где его нужно закрепить.
h3 {
/* Element will be 'fixed' when it ... */
position: sticky;
/* ... is 10px from the top of the viewport */
top: 10px;
}
В предыдущем примере элемент <h3> будет зафиксирован на расстоянии 10 пикселей от верхней части области просмотра. Чтобы закрепить его непосредственно в верхней части области просмотра, вы должны установить атрибут top как top: 0px .
Поддержка этой функции довольно сильна. Он доступен в Chrome (ура), Firefox и Safari. Вот более подробная информация о position:sticky :