Фиксация блока при прокрутке

Существует много различных плагинов, чтобы "залепить" блок на месте, когда страница прокручивается вниз. И некоторые из них, мягко говоря, ужасные и дергают страницу вверх в момент, когда блок меняет свою позицию на фиксированную.

"Залипание" блока можно сделать гораздо проще, воспользовавшись небольшим скриптом на jQuery или всего одним свойством на CSS

Вариант на CSS (position: sticky):

Для фиксации блока таким способом достаточно просто добавить нужному элементу свойство position: sticky

Такой элемент будет рассматриваться как относительно позиционированный до тех пор, пока родительский контейнер не пересечет указанный порог, в котором он прокручивается, после чего он обрабатывается как фиксированный до тех пор, пока не встретит противоположный край содержащего его блока. Другими словами этот элемент остается ограниченным родительским контейнером, в котором он находится.

Вариант на jQuery (position: fixed):

Данный вариант на JS c библиотекой jQuery немного сложнее, но более гибкий. Например, можно изменить фон у "залипшего" блока

Добавить комментарий:

Ваш комментарий отправлен!