Я продолжаю каждый день сталкиваться с сайтами, где стандартный функционал браузера реализуют на JavaScript. Наверное можно даже рубрику #nojs сделать. Сегодня рассмотрим возможность закрепления блоков при скролле на чистом css.
Возможно для кого-то это будет супер-очевидная статья, однако несмотря на это, на миллионах сайтов, где есть закрепление блоков при скролле, реализовано оно через библиотеки на JavaScript. Возможно не хватает информации о свойстве или руки не дошли до этого, но это действительно так. Когда закрепление происходит средствами CSS без лишних вычислений, рендер происходит максимально эффективно, нет прослушивателя события скролл, и отзывчивость сайта существенно улучшается.
В CSS уже достаточно давно появилось свойство position: sticky. Указываете его для элемента и позиционируете при помощи inset (top right bottom left) для закрепления. Закреплять можно сверху, снизу, слева и справа. Можно даже по двум осям.
Если вы сомневаетесь, можно ли использовать это решение - смотрите поддержку. На момент написания 96,58%.
Пример на Codepen Знали вы о таком свойстве? Используете в работе? Пишите в комментарии.
