position: sticky
— это новый способ позиционирования элементов, концептуально похожий на position: fixed
. Разница в том, что элемент с position: sticky
ведет себя как position: relative
внутри своего родителя, пока в области просмотра не будет достигнут заданный порог смещения.
Случаи использования
Перефразируя первоначальное предложение Эдварда О'Коннора об этой функции:
Представляем липкое позиционирование
![Прикрепленное демо](https://developer.chrome.google.cn/static/blog/stick-your-landings-position-sticky-lands-in-webkit/image/sticky-demo-aa52b29fe6e7f.jpg?hl=ru)
Просто добавив position: sticky
(с префиксом поставщика), мы можем указать элементу как position: relative
до тех пор, пока пользователь не прокрутит элемент (или его родительский элемент) до 15 пикселей сверху:
.sticky {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
top: 15px;
}
top: 15px
, элемент становится фиксированным.
Чтобы проиллюстрировать эту функцию на практике, я собрал ДЕМО , в которой заголовки блогов прикрепляются при прокрутке.
Старый подход: события прокрутки
До сих пор для достижения эффекта липкости сайты настраивали прослушиватели событий scroll
в JS. Мы также используем эту технику в руководствах по html5rocks. На экранах размером менее 1200 пикселей наша боковая панель с оглавлением меняется на position: fixed
после определенного количества прокрутки.
Вот (уже старый способ) создать заголовок, который прикрепляется к верхней части области просмотра, когда пользователь прокручивает вниз, и возвращается на место, когда пользователь прокручивает вверх:
<div class="header"></div>
<script>
var header = document.querySelector('.header');
var origOffsetY = header.offsetTop;
function onScroll(e) {
window.scrollY >= origOffsetY ? header.classList.add('sticky') :
header.classList.remove('sticky');
}
document.addEventListener('scroll', onScroll);
</script>
Попробуйте: http://output.jsbin.com/omanut/2/
Это достаточно просто, но эта модель быстро выходит из строя, если вы хотите сделать это для группы узлов DOM, скажем, для каждого заголовка <h1>
блога при прокрутке пользователем.
Почему JS не идеален
В общем, обработчики прокрутки никогда не были хорошей идеей. Люди склонны выполнять слишком много работы и задаются вопросом, почему их пользовательский интерфейс неудобен.
Еще следует учитывать, что все больше и больше браузеров реализуют аппаратное ускорение прокрутки для повышения производительности. Проблема в том, что при использовании обработчиков прокрутки JS браузеры могут вернуться в более медленный (программный) режим. Теперь мы больше не работаем на графическом процессоре. Вместо этого мы снова обращаемся к процессору. Результат? Пользователи воспринимают больше рывков при прокрутке страницы.
Таким образом, имеет смысл сделать такую функцию в CSS декларативной.
Поддерживать
К сожалению, спецификации для этого нет. Он был предложен на сайте www-style еще в июне и только что появился в WebKit. Это означает, что нет хорошей документации, на которую можно было бы указать. Однако следует отметить одну вещь: согласно этой ошибке , если указаны и left
, и right
, преимущество имеет left
. Аналогично, если top
и bottom
используются одновременно, top
выигрывает.
На данный момент поддерживается Chrome 23.0.1247.0+ (текущий Canary) и WebKit каждую ночь.