У меня есть следующее меню
<div class="header-main">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
Стили
body {
background: #20262E;
padding: 0;
font-family: Helvetica;
}
.header-main {
position: absolute;
top: 0;
left: 0;
width: 100%;
background: #fff;
transition: all .6s ease;
&.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
opacity: 1;
z-index: 100000;
}
}
И javascript
let headerMain = $('#js-header-main');
let headerMainHeight = headerMain.innerHeight();
/* fix menu on scroll
====================================================*/
$('body').css('padding-top', headerMainHeight);
$(window).scroll(function () {
if ($(window).scrollTop() > headerMainHeight) {
headerMain.addClass("fixed");
}
else {
headerMain.removeClass("fixed");
}
});
А вот ссылка на сайт
portfolio.webforworld.info
Меню при скролле появляется, только резко. А мне нужно сделать плавное появление, после 50 px от высоты меню.
Сначала ее нужно убрать, потом, чтобы плавно появилось.
Уже час голову ломаю.
Буду признателен за помощь.
