js监听html页面滚动时触发的事件

页面滚动时,有时候我们需要实现一些效果,比如向上或向下滚动时,我们需要切换显示顶部的导航栏,也就是我们需要在页面滚动时触发一个事件,先上一个鸿硕以前使用过的代码:

<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

 

 

 

人已赞赏
IT百科行业动态

百度商桥改名爱番番之后将于7月20号开始收费(针对非推广用户)

2021-7-11 17:28:41

css3建站知识

CSS transition属性

2021-8-10 21:12:06

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索