监测鼠标滚轮的上下滚动来实现导航条显示隐藏

最新推荐文章于 2024-07-28 23:45:50 发布

dream_halo

最新推荐文章于 2024-07-28 23:45:50 发布

阅读量2.9k

点赞数 2

分类专栏： H5 文章标签： javascript

H5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

$(document).on("mousewheel DOMMouseScroll", function (e) {
    var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) ||  // chrome & ie
                (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));              // firefox
    s = $(window).scrollTop();
    if(s != 0){
        $('.nav_top').addClass('nav_box');//滚动条样式
    }
    if (delta > 0) {
        // 向上滚
        $('.nav_top').fadeIn(400);//导航条显示
	$('.nav_top').addClass('nav_box');
	if(s == 0){
	    $('.nav_top').removeClass('nav_box');
        }

    } else if (delta < 0) {
         // 向下滚
         $('.nav_top').fadeOut(400);//导航条隐藏
    }
});