上代码
1
904<!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>
<p class="header">321</p>
<p class="content"></p>
<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。先谢过！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
你要的不是scroll，而是
scrollstart - 记下当前位置
scrollstop - 取出之前记下的位置，和当前位置作比较，并处理
https://github.com/ssorallen/jquery-scrollstop