上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.header {
position: fixed;
width: 100%;
height: 50px;
background-color: red;
}
.content {
width: 100%;
height: 2000px;
background-color: #ccc;
}
.hide {
top: -50px;
}
.show {
top: 0;
}
</style>
</head>
<body>
<div class="header">321</div>
<div class="content"></div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function(){
var oTop1 = $(document).scrollTop();
$(window).scroll(function(){
var oTop2 = $(document).scrollTop();
if(oTop2 > oTop1){
$(".header").addClass("hide").removeClass("show");
}else {
$(".header").addClass("show").removeClass("hide");
}
oTop1 = $(document).scrollTop();
});
});
</script>
</body>
</html>
如上所示,在ie下向下滑动时会增加class:hide 但是松开滑轮后就会移出并同时增加show。
在代码中打印数值后发现滚动一次滑轮ie浏览器会打印多次数值,而其他浏览器只打印一个数值,故认为是ie浏览器滑动事件会执行多次。问题发现但是无法解决,故希望大神们给个解决方案兼容到ie。先谢过!
你要的不是scroll,而是
scrollstart - 记下当前位置
scrollstop - 取出之前记下的位置,和当前位置作比较,并处理
https://github.com/ssorallen/jquery-scrollstop