Sticky sidebar (VanillaJS)

Плавающая боковая панель — sticky sidebar для навигации. Здесь используются: простая HTML-разметка, немного CSS и чистый Javascript (никаких библиотек или фреймворков).

See this code sticky sidebar on x.xhtml.ru.

При инициализации метод getParams() вычисляет и запоминает высоту шапки (header) и боковой панели (sidebar), позицию offsetTop подвала (footer). Затем устанавливает CSS-свойство position: sticky для боковой панели и начинает отслеживать события прокрутки и изменения размеров окна.

Метод-обработчик прокрутки scrollHandler() вычисляет и корректирует координаты плавающей боковой панели.

Обработчик изменений размеров окна resizeHandler() вызывает getParams(), в котором пересчитывает размеры шапки и боковой панели, а также позицию подвала относительно окна. Затем вызывает scrollHandler() чтобы скорректировать позицию боковой панели.