menumenu_open <!— xhtml.ru —>

Sticky sidebar (VanillaJS)

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

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

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

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

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

Loading...