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

Question

[Гарольд]

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

<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 отличаются друг от друга

Answer 1

[Виталий Киренков]

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

.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");
}
})

Comments

[Гарольд]

Единственный минус при добавлении: -webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;

в safari выплывает слева, а не сверху как в chrome

[Виталий Киренков]

@turbinikarpus А это проблема ваших стилей и к данному вопросу не имеет никакого отношения...