页面滚动时，有时候我们需要实现一些效果，比如向上或向下滚动时，我们需要切换显示顶部的导航栏，也就是我们需要在页面滚动时触发一个事件，先上一个鸿硕以前使用过的代码：
<script>$(function(){$(window).scroll(function(){if($(document).scrollTop() >= 100){$("header").addClass("nav-fixed");}else{// $("header").hide();$("header").removeClass("nav-fixed");}})})</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Dome</title>
<script type="text/javascript">function scroll(){
//console.log("打印log日志");实时看下效果
console.log("开始滚动！");
}var scrollFunc = function (e) {
e = e || window.event;
if (e.wheelDelta) { //第一步：先判断浏览器IE，谷歌滑轮事件
if (e.wheelDelta > 0) { //当滑轮向上滚动时
console.log("滑轮向上滚动");
}
if (e.wheelDelta < 0) { //当滑轮向下滚动时
console.log("滑轮向下滚动");
}
} else if (e.detail) { //Firefox滑轮事件
if (e.detail> 0) { //当滑轮向上滚动时
console.log("滑轮向上滚动");
}
if (e.detail< 0) { //当滑轮向下滚动时
console.log("滑轮向下滚动");
}
}
}
//给页面绑定滑轮滚动事件
if (document.addEventListener) {//firefox
document.addEventListener('DOMMouseScroll', scrollFunc, false);
}
//滚动滑轮触发scrollFunc方法 //ie 谷歌
window.onmousewheel = document.onmousewheel = scrollFunc;
</script>
</head>
<body onscroll="scroll()">
<div style="height: 2000px;background-color: aqua;"></div>
</body>
</html>
————————————————
版权声明：本文为CSDN博主「--LIANG--」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/zl570932980/article/details/73840839
