zoukankan      html  css  js  c++  java
  • js监听网页页面滑动滚动事件,实现导航栏自动显示或隐藏

    /**
    * 页面滑动滚动事件
    * @param e
    */
    //0为隐藏,1为显示
    var s = 1;

    function scrollFunc(e) {
    // e存在就用e不存在就用windon.event
    e = e || window.event;
    // 先判断是什么浏览器
    if (e.wheelDelta) {
    // 浏览器IE,谷歌
    if (e.wheelDelta > 0) {
    //当滑轮向上滚动时
    // console.log("滑轮向上滚动");
    if (s == 0) {
    //向下滑动
    $(".div2").slideDown("slow");
    s = 1;
    }
    }
    if (e.wheelDelta < 0) {
    //当滑轮向下滚动时
    // console.log("滑轮向下滚动");
    if (s == 1) {
    //向上滑动
    $(".div2").slideUp("slow");
    s = 0;
    }
    }
    } else if (e.detail) {
    //浏览器Firefox
    if (e.detail > 0) {
    //当滑轮向上滚动时
    // console.log("滑轮向上滚动");
    if (s == 0) {
    //向下滑动
    $(".div2").slideDown("slow");
    s = 1;
    }
    }
    if (e.detail < 0) {
    //当滑轮向下滚动时
    // console.log("滑轮向下滚动");
    if (s == 1) {
    //向上滑动
    $(".div2").slideUp("slow");
    s = 0;
    }
    }
    }
    }

    //给页面绑定滑轮滚动事件
    if (document.addEventListener) {
    //firefox浏览器
    document.addEventListener('DOMMouseScroll', scrollFunc, false);
    }
    //ie 谷歌浏览器
    window.onmousewheel = document.onmousewheel = scrollFunc;
  • 相关阅读:
    完全背包
    二分求值(二分适合求答案在两个数之间的题目)
    set<pair<int,int> >的用法
    01背包 (dp专题)
    矩阵快速幂
    BZOJ1977 [BeiJing2010组队]次小生成树 Tree
    BZOJ1854 [Scoi2010]游戏
    BZOJ1054 [HAOI2008]移动玩具
    NOIP系列复习及题目集合
    BZOJ2708 [Violet 1]木偶
  • 原文地址:https://www.cnblogs.com/c2g5201314/p/11689477.html
Copyright © 2011-2022 走看看