[英]How to create responsive sticky navigation like this link
http://preview.themeforest.net/item/flatsome-multipurpose-responsive-woocommerce-theme/full_screen_preview/5484319 http://preview.themeforest.net/item/flatsome-multipurpose-responsive-woocommerce-theme/full_screen_preview/5484319
that when you scroll up certain px goes screen off and after again certain px scroll up and again visible on the top as a fixed navigation bar当您向上滚动某些 px 会关闭屏幕,然后某些 px 向上滚动并再次在顶部作为固定导航栏可见
HTML HTML
<nav id="nav">NAV BAR</nav>
CSS CSS
body{
margin:0;
height:200vh;
}
#nav{
width:100vw;
height:10vh;
background-color:black;
color:white;
text-align:center;
line-height:10vh;
}
JS JS
$(document).ready(function(){
var hiding = false;
var height = $('#nav').outerHeight();//the certain pixel
$(document).scroll(function(){
var scroll = $(document).scrollTop();
if (scroll >height){
$('#nav').css({'position':'fixed','top':'0','left':'0'}, 300);
if(hiding == false){
$('#nav').css('display','none');
$('#nav').slideDown();
hiding= true;
} } else if(scroll <height) {
$('#nav').css('position','relative');
hiding = false;
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.