码迷,mamicode.com
首页 > Web开发 > 详细

js监听网页页面滑动滚动事件,实现导航栏自动显示或隐藏

时间:2019-10-17 01:18:59      阅读:472      评论:0      收藏:0      [点我收藏+]

标签:谷歌   dom   param   页面滑动   log   false   console   doc   fun   

/**
* 页面滑动滚动事件
* @param e
*/
//0为隐藏,1为显示
var s = 1;

function scrollFunc(e) {
// e存在就用e不存在就用windon.event
e = e || window.event;
// 先判断是什么浏览器
if (e.wheelDelta) {
// 浏览器IE,谷歌
if (e.wheelDelta > 0) {
//当滑轮向上滚动时
// console.log("滑轮向上滚动");
if (s == 0) {
//向下滑动
$(".div2").slideDown("slow");
s = 1;
}
}
if (e.wheelDelta < 0) {
//当滑轮向下滚动时
// console.log("滑轮向下滚动");
if (s == 1) {
//向上滑动
$(".div2").slideUp("slow");
s = 0;
}
}
} else if (e.detail) {
//浏览器Firefox
if (e.detail > 0) {
//当滑轮向上滚动时
// console.log("滑轮向上滚动");
if (s == 0) {
//向下滑动
$(".div2").slideDown("slow");
s = 1;
}
}
if (e.detail < 0) {
//当滑轮向下滚动时
// console.log("滑轮向下滚动");
if (s == 1) {
//向上滑动
$(".div2").slideUp("slow");
s = 0;
}
}
}
}

//给页面绑定滑轮滚动事件
if (document.addEventListener) {
//firefox浏览器
document.addEventListener(‘DOMMouseScroll‘, scrollFunc, false);
}
//ie 谷歌浏览器
window.onmousewheel = document.onmousewheel = scrollFunc;

js监听网页页面滑动滚动事件,实现导航栏自动显示或隐藏

标签:谷歌   dom   param   页面滑动   log   false   console   doc   fun   

原文地址:https://www.cnblogs.com/c2g5201314/p/11689477.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!