用javascript监听鼠标滚动

Css的“position:fixed”属性可以实现导航栏的悬浮，这样当用户下拉页面时，导航条会紧贴浏览器边缘履行自己的义务。方便是方便了，但浏览器窗口就这么大点地方，始终留出这么大一块感觉有点浪费。部分站点采用了很棒的互动设计，即鼠标滚轮上翻时显示导航栏，下滚时则隐藏，这里就需要监听鼠标的滚动了。

pc端的解决方案

windowAddMouseWheel();
function windowAddMouseWheel() {
    var scrollFunc = function (e) {
        e = e || window.event;
        if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件
            if (e.wheelDelta > 0) { //当滑轮向上滚动时
                if(document.getElementById('header').classList!='fade-in')
                document.getElementById('header').classList='fade-in';
            }
            if (e.wheelDelta < 0) { //当滑轮向下滚动时
                if(document.getElementById('header').classList!='fade-out')
                document.getElementById('header').classList='fade-out';
            }
        } else if (e.detail) {  //Firefox滑轮事件
            if (e.detail> 0) { //当滑轮向上滚动时
                if(document.getElementById('header').classList!='fade-in')
                document.getElementById('header').classList='fade-in';
            }
            if (e.detail< 0) { //当滑轮向下滚动时
                if(document.getElementById('header').classList!='fade-out')
                document.getElementById('header').classList='fade-out';
            }
        }
    };
    //给页面绑定滑轮滚动事件
    if (document.addEventListener) {
        document.addEventListener('DOMMouseScroll', scrollFunc, false);
    }
//滚动滑轮触发scrollFunc方法
    window.onmousewheel = document.onmousewheel = scrollFunc;
}

博主的导航条容器名为'header',通过监听时间分别赋予其不同的类，然后通过给'fade-in','fade-out'这两个类设置不同的css动画效果,以实现导航条的隐藏与展现。

.fade-in{animation:fade-in;animation-duration:.5s;animation-fill-mode: forwards;}
.fade-out{animation:fade-out;animation-duration:.5s;animation-fill-mode: forwards;}

@keyframes fade-in{
   0%{transform:translateY(-45px);opacity:0;}
   100%{transform:translateY(0px);opacity:1;}
}
@keyframes fade-out{
   0%{transform:translateY(0px);opacity:0;}
   100%{transform:translateY(-45px);opacity:1;}
}