导航栏动态显示隐藏

js 

/* 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;}
}