[英]Fixed menu position top on scroll
Menu is fixed and and offset from top height of header. 菜单是固定的,并且与标题的顶部高度偏移。 but when I scroll header goes up because it's not fixed. 但是当我滚动标题时,它就因为不固定而上升。 So menu should also go up on scroll. 因此,菜单也应该滚动显示。
I just want there should be no offset margin from top on menu when scroll down. 我只希望向下滚动时,菜单顶部的偏移量不存在。
$(window).scroll(function(){
var y = $(window).scrollTop();
var bgp = $(window).scrollTop();
var mtv = $('.menu').position().top;
if(y > 0){
$('.menu').css({'top': + mtv-bgp +'px'});
} else{
$('.menu').css({'top': + bgp-mtv+'px'});
}
});
if i get what you want correct then this should help you: 如果我得到您想要的正确信息,那么这应该对您有帮助:
body{
margin:0;
padding:0;
}
.header{
background:#ddd;
height:80px;
position:relative;
}
.container{
height:1000px;
background:#eee;
position:relative;
width:100%;
}
.menu{
background:#000;
width:200px;
height:100%;
left:0;
top:80px;
position:fixed;
z-index:11;
transition: all 0.6s ease;
}
#toggle{
width:50px;
height:50px;
background:yellow;
float:left;
margin:10px 20px;
}
and the js 和js
$(window).scroll(function(){
var y = $('body').scrollTop();
if(y > 80){
$('.menu').css({'top':'0px'});
}
else if(y<80)
$('.menu').css({'top':'80px'});
});
i also updated your fiddel : https://jsfiddle.net/g6wfy740/2/ 我还更新了您的朋友: https ://jsfiddle.net/g6wfy740/2/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.