ナビゲーションバーのダイナミック表示非表示
js
css
/* Header Sticky
========================================================*/
$(window).on('scroll',function() {
if ($(this).scrollTop() >170){
$('.header-sticky').addClass("is-sticky");
}
else{
$('.header-sticky').removeClass("is-sticky");
}
});
css
.header-sticky.is-sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
box-shadow: 0 8px 6px -6px rgba(0,0,0,.4);
-webkit-animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
}
@keyframes fadeInDown{from{opacity:0;transform:translate3d(0, -100%, 0);}
to{opacity:1;transform:none;}
}