Загрузка...Плавающая боковая панель – sticky sidebar для навигации. Здесь используются: простая HTML-разметка, немного CSS и чистый Javascript (никаких библиотек или фреймворков).
При инициализации метод getParams() вычисляет и запоминает высоту шапки (header) и боковой панели (sidebar), позицию offsetTop подвала (footer). Затем устанавливает CSS-свойство position: sticky для боковой панели и начинает отслеживать события прокрутки и изменения размеров окна.
Метод-обработчик прокрутки scrollHandler() вычисляет и корректирует координаты плавающей боковой панели.
Обработчик изменений размеров окна resizeHandler() вызывает getParams(), в котором пересчитывает размеры шапки и боковой панели, а также позицию подвала относительно окна. Затем вызывает scrollHandler() чтобы скорректировать позицию боковой панели.