Придерживайтесь своих приземлений! позиция — липкие земли в WebKit

position: sticky — это новый способ позиционирования элементов, концептуально похожий на position: fixed . Разница в том, что элемент с position: sticky ведет себя как position: relative внутри своего родителя, пока в области просмотра не будет достигнут заданный порог смещения.

Варианты использования

Перефразируя первоначальное предложение Эдварда О'Коннора об этой функции:

Представляем липкое позиционирование

ЗАПУСТИТЬ ДЕМО

Просто добавив 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 каждую ночь.