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

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

Пример фиксации на CSS (position: sticky)

В данном примере используется CSS свойство position: sticky и объект остается ограниченным родительским контейнером.

CSS код

HTML код

Пример фиксации на jQuery (position: fixed)

Данный вариант работает на JS и требует подключение библиотеки jQuery. Он более гибкий и имеет возможность менять фон у фиксированного (залипшего) блока.

CSS код

HTML код

Инициализация JS: