JS实现让滚轮控制网页头部显示与隐藏

在很多网站中都有鼠标网上滚动头部就会滑出，继续往下滚动就会隐藏，下面看看实现方法

scroll();

function scroll(){// 入口方法  这个方法是获取事件的兼容，获取delta  --表示滚动条走向
        var ele = document.documentElement || document.body;
        var eventType = 'mousewheel';
        // 火狐是DOMMouseScroll事件
        if (document.mozHidden  !== undefined) {
             eventType = 'DOMMouseScroll';
        }
        function getData(event){
            var e = event || window.event;
            //为了兼容火狐
            //为了兼容火狐
            var delta = e.wheelDelta?e.wheelDelta:e.detail;//wheelDelta 非火狐-120：向下  120：向上   /detail火狐 3：向下  -3 ：向上
            bScrolls(delta);  
        }
        myAddEvent(ele,eventType,getData);
    }

function myAddEvent(ele,sEvent,getData){ //这个方法是兼容绑定事件/监听事件
        if(ele.addEventListener && !ele.attachEvent){//非IE
            ele.addEventListener(sEvent,getData); 
        }else{//IE
            if(document.attachEvent && !document.addEventListener){ //IE8以下
                ele.attachEvent('on'+sEvent,getData); 
            }else{ //IE8以上下
                ele.addEventListener(sEvent,getData); 
            }
        }
    }

function bScrolls(delta){//执行操作
        var p = document.documentElement.scrollTop || document.body.scrollTop;//当前滚动条的高度
        if(p > 100){//如果滚动条的高度大于你设置的高度，就开始判断滚动条的走向
            $('.header').addClass('scroll');
            if(delta < -3 || delta == 3){//向下滚动
                $('.header').removeClass('top');
            }
            else if(delta > 3 || delta == -3){//上滚
                $('.header').addClass('top');
            }
        }else{
            $('.header').removeClass('scroll');
        }
    }

 

这样用鼠标滚轮可以操控头部显示与隐藏，但是拖动滚动条确是没反应

在谷歌火狐中也可以监听onscroll 他可以实现用鼠标拉滚动条也会有这样的效果，在IE中不行必须要使用滚轮事件，

而且用onscroll事件监听，获取不到wheelDelta值，所以判断滚动条走向就要自己定义变量，去判断滚动条走向，代码如下

function scrolls(){
    var p=0,t=0;
    var windHeight = $(window).height();
    $(window).scroll(function(){            
        p = $(this).scrollTop();
　　　　　if(t<=p){//下滚
            //显示操作
        }
        else{//上滚
            //隐藏操作
        }
         t = p;    
    });
}

 

此方法仅供参考