Подскажите как сделать, чтобы горизонтальное меню в определенной секции (в середине лендинга), когда доходит к верху страницы стало фиксированное,(прилипало к верху), причем все остальное содержимое проходило под ним; а после окончания секции, в котором находится меню, отключалась фиксация и меню прокручивалось дальше...
Ответ
поставить две "метки": в начале секции и в конце
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;
}
Комментариев нет:
Отправить комментарий