Страницы

Поиск по вопросам

пятница, 15 марта 2019 г.

Фиксация меню, когда оно доходит к верху, и отключение фиксации по завершению секции

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


Ответ

поставить две "метки": в начале секции и в конце cоздать событие на скролл, которое бы вычисляло положение страницы и включало или отключало фиксацию.
Предлагаю такой вариант:
function stickMenu() { var windowTop = $(window).scrollTop(); var sectionStarts = $('#sectionStarts').offset().top; var sectionEnds = $('#sectionEnds').offset().top; if (windowTop > sectionEnds) { $('.menu').removeClass('fixed'); } else if (windowTop > sectionStarts) { $('.menu').addClass('fixed'); } else { $('.menu').removeClass('fixed'); } } $(window).scroll(function() { stickMenu(); }); div:not(.menu) { height: 300px; } .menu { background-color: lightgray; } .menu.fixed { position: fixed; top: 0; }

Начало страницы
Начало секции
Содержимое секции
конец секции
Конец страницы

Комментариев нет:

Отправить комментарий