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;
});
}

此方法仅供参考