position: sticky

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

Добавив с префиксами position: sticky мы можем сказать, что элемент позиции будет position: relative, пока пользователь прокручивает элемент (или его родитель), с отступом 15px сверху:

.sticky {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  top: 15px;
}

top: 15px элемент становится фиксированным на расстоянии в 15px.

Демо

Прокрутка страницы

До сих пор для достижения эффекта при прокрутки, на веб сайтах применяют JavaScript. На экранах меньше чем 1200px боковая панель после прокрутки страницы вниз изменится в положение position: fixed. Например, «Фиксированный плавающий scrollbar».

Новый способ position: sticky прикреплён к верхней части веб-страницы. Когда пользователь прокручивает страницу вниз, заголовок всегда находится сверху страницы и меняется в зависимости от положения просматриваемой страницы. Если пользователь прокручивает страницу вверх, заголовок становится на своё место:

Код страницы HTML position: sticky с помощью JavaScript:

<style>
.sticky {
position: fixed;
top: 0;
}
.header {
width: 100%;
background: #F6D565;
padding: 25px 0;
}
</style>
<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>

Модель быстро ломается, если вы хотите сделать это для связки узлов DOM. Когда пользователь прокручивает страницу вверх или вниз, каждый тег <h...> — это заголовки страницы.

Смотрите небольшой пример position: sticky с jQuery для совместимости со всеми браузерами:

position: sticky

Поддержка

Нужно учитывать, что все больше и больше браузеров реализуют аппаратное ускорение для повышения производительности. Проблема в том, что прокрутка с помощью JavaScript может работать медленно, потому что будет использовать CPU вместо аппаратного ускорения GPU.

К сожалению position: sticky осталось на WebKit — это означает что нет хорошей документации.