文章目录
detail与wheelDelta上下滚动检测隐藏导航栏例子当在垂直方向滚动页面时就会触发 mousewheel 事件
detail与wheelDelta
判断鼠标滚轮滚动方向在各浏览器的属性不同
现在五大浏览器（IE、Opera、Safari、Firefox、Chrome）中Firefox 使用detail，其余四类使用wheelDelta；两者只在取值上不一致，代表含义一致
detail与wheelDelta只各取两个 值，detail取±3，wheelDelta取±120，两值正负代表的方向相反
在非firefox浏览器中，滚轮向上滚动返回的数值是120，向下滚动返回-120
而在firefox浏览器中，滚轮向上滚动返回的数值是-3，向下滚动返回3
上下滚动检测
var scrollFunc = function (e) {e = e || window.event;if (e.wheelDelta) {//判断浏览器IE，谷歌滑轮事件 if (e.wheelDelta > 0) {//当滑轮向上滚动时alert("滑轮向上滚动");}if (e.wheelDelta < 0) {//当滑轮向下滚动时alert("滑轮向下滚动");}} else if (e.detail) {//Firefox滑轮事件if (e.detail< 0) {//当滑轮向上滚动时alert("滑轮向上滚动");}if (e.detail> 0) {//当滑轮向下滚动时alert("滑轮向下滚动");}}}//给页面绑定滑轮滚动事件//火狐使用DOMMouseScroll绑定鼠标滚动document.addEventListener('DOMMouseScroll', scrollFunc, false);//其他浏览器用mousewheel绑定document.onmousewheel = scrollFunc;
获取滚动方向后可以实现某元素的 下滚隐藏 / 上滚显示
使用js改变css：
document.getElementById(id).style.property = new style
可以在上下滚动时修改display或visible（根据实际布局）
document.getElementById(id).style.display = none;//document.getElementById(id).style.visibility = hidden;
隐藏导航栏例子
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {margin: 0;height: 200vh;background-color: darkcyan;}div#nav {position: fixed;width: 100vw;height: 40px;background-color: blanchedalmond;margin: 0 auto;}</style></head><body><div id="nav"></div><script>var scrollFunc = function (e) {let nav = document.getElementById('nav');e = e || window.event;if (e.wheelDelta) {//判断浏览器IE，谷歌滑轮事件 if (e.wheelDelta > 0) {//当滑轮向上滚动时nav.style.position = "fixed";}if (e.wheelDelta < 0) {//当滑轮向下滚动时nav.style.position = "absolute";}} else if (e.detail) {//Firefox滑轮事件if (e.detail < 0) {//当滑轮向上滚动时nav.style.position = "fixed";}if (e.detail > 0) {//当滑轮向下滚动时nav.style.position = "absolute";}}}document.addEventListener('DOMMouseScroll', scrollFunc, false);document.onmousewheel = scrollFunc; </script></body></html>
此demo更改导航栏的position值，实现不在首页时上滚也能显示导航栏（利用fixed定位）
![JavaScript实现HTML导航栏下拉菜单[悬浮显示]](https://1000zi.500zi.com/uploadfile/img/16/70/32212167a0a0b3a6e6a3d3cb5d1d6d8c.jpg)
