手机端滑动隐藏头部

采用面向对象来做

关于头部滑动显示和隐藏

var scrollFunc = function(e) {
    var direct = 0;
    e = e || window.event;
    if (e.wheelDelta) {
        direct = e.wheelDelta > 0 ? 1 : -1;
    } else if (e.detail) {
        direct = e.detail < 0 ? 1 : -1;
    }
    isShow(direct);
}
//用淡入淡出的效果来显示头部
function isShow(direct) {
    if (direct == 1) {
        //向上显示
        $(".header_info").fadeIn(); //这里是你要隐藏的class
        var winH = $(document).height();
    } else {
        //向下隐藏
        $(".header_info").fadeOut(); //这里是你要隐藏的class
    }
}

//全局变量，触摸开始位置
var startX = 0,
startY = 0;

//touchstart事件
function touchSatrtFunc(evt) {
    try {
        var touch = evt.touches[0]; //获取第一个触点
        var x = Number(touch.pageX); //页面触点X坐标
        var y = Number(touch.pageY); //页面触点Y坐标
        //记录触点初始位置
        startX = x;
        startY = y;
    } catch(e) {
        alert('touchSatrtFunc：' + e.message);
    }
}

//touchmove事件，这个事件无法获取坐标
function touchMoveFunc(evt) {
    try {
        //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
        var touch = evt.touches[0]; //获取第一个触点
        var x = Number(touch.pageX); //页面触点X坐标
        var y = Number(touch.pageY); //页面触点Y坐标
        if (y - startY > 0) {
            //向下滑
            $(".header_info").fadeIn();
        } else {
            //向上滑
            $(".header_info").fadeOut();
        }
    } catch(e) {
        alert('touchMoveFunc：' + e.message);
    }
}

//touchend事件
function touchEndFunc(evt) {
    try {
        //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
        //var text = 'TouchEnd事件触发';
        //console.log(text);
    } catch(e) {
        alert('touchEndFunc：' + e.message);
    }
}

//绑定事件
function bindEvent() {
    document.addEventListener('touchstart', touchSatrtFunc, false);
    document.addEventListener('touchmove', touchMoveFunc, false);
    document.addEventListener('touchend', touchEndFunc, false);
}

//判断是否支持触摸事件
function isTouchDevice() {
    try {
        document.createEvent("TouchEvent");
        bindEvent(); //绑定事件
    } catch(e) {
        //不支持TouchEvent事件！                        
        if (document.addEventListener) {
            document.addEventListener('DOMMouseScroll', scrollFunc, false);
        } //W3C
        window.onmousewheel = document.onmousewheel = scrollFunc; //IE/Opera/Chrome 
    }
}

</br>

</br>
源码来源:http://www.w3cfuns.com/notes/19371/5249801f7f7cfcd4d74f26db7f431335.html