Как реализовать прилипшее меню при скролле?

Question

Гарольд @turbinikarpus

Как реализовать прилипшее меню при скролле?

К примеру есть три блока:

<div class="header">
   <div class="menu1"></div>
   <div class="menu2"></div>
</div>
<div class="main"></div>
<div class="footer"></div>

Где в блоке header показывается меню menu1,
Необходимо, появление меню menu2, при полном проскролливании блока header

menu1 и menu2 отличаются друг от друга

Вопрос задан более трёх лет назад
2840 просмотров

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

Подписаться 5 Оценить Комментировать

Answer 1 · 2014-09-17 22:09:27

Так будет работать, но можно и отрефакторить.

.menu1 { display: block;}
.menu2 { display: none;}
.header.scrolled .menu1 { display: none;}
.header.scrolled .menu2 { display: block;}

$(window).on("scroll", function(){
if ( $(window).scrollTop() > $(".header").height() ){
$(".header").addClass("scrolled");
} else {
$(".header").removeClass("scrolled");
}
})

Как реализовать прилипшее меню при скролле?

Войдите на сайт