我制作了一个自动隐藏的导航栏,它在Chrome中效果很好,但IE11吓坏了。这个想法是,当你向下滚动它隐藏,但如果你向上滚动它会重新出现。在IE11中,我向下滚动它隐藏了导航栏。然后当我向后滚动时,没有任何事情发生在一秒钟......然后导航栏出现并快速连续消失了3次......然后几秒钟后它再次完成了。知道什么是错的吗?
<script>
var lastScrollTop = 0;
$(window).scroll(function(){
var st = $(this).scrollTop();
if (st > lastScrollTop){
$('#header').animate({ marginTop: '-70px', opacity: 0 }, 200);
} else {
$('#header').animate({ marginTop: '0px', opacity: 1 }, 200);
}
lastScrollTop = st;
});
</script>
答案 0 :(得分:0)
Onscroll发射了很多次,所以你要告诉它动画很多次。
使用stop()
停止动画$('#header').stop().animate(...);
或检测它是否是动画。
$('#header').not(":animated").animate(...);
答案 1 :(得分:0)
我认为应该尽量不使用动画,滚动会多次捕捉动作,所以用.css替换
使用Javascript:
$(function(){
var start = 0;
var end;
$(window).scroll(function(){
end = $(this).scrollTop();
if (end > start){
$('#header').css({marginTop: '-70px', opacity: 0 });
} else {
$('#header').css({ marginTop: '0px', opacity: 1 });
}
start = end;
});
});
CSS:
body{margin:0;height:2000px;}
#header{width:100%;position:fixed;height:70px;line-height:70px;background:red;top:0;left:0;}