jquery 上下滚动显示隐藏

Posted 2020-10-21 tanxiang6690

 

    function scroll(fn) {
        var beforeScrollTop = document.body.scrollTop,
            fn = fn || function() {};
        window.addEventListener("ontouchmove", function() {
            var afterScrollTop = document.body.scrollTop,
                delta = afterScrollTop - beforeScrollTop;
            if (delta === 0) return false;
            fn(delta > 0 ? "down" : "up");
            beforeScrollTop = afterScrollTop;
        }, false);
    }

 

2，sass转译

@function rem($n) {
        @return $n / 40 + rem;
}

 

3，js判断鼠标上下滚动；

<script type="text/javascript">  
        var scrollFunc = function (e) {  
       　　 e = e || window.event;  
        　　if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件               
         　　   if (e.wheelDelta > 0) { //当滑轮向上滚动时  
             　　   alert("滑轮向上滚动");  
           　　 }  
           　　 if (e.wheelDelta < 0) { //当滑轮向下滚动时  
              　　  alert("滑轮向下滚动");  
           　　 }  
      　　  } else if (e.detail) {  //Firefox滑轮事件  
           　　 if (e.detail> 0) { //当滑轮向上滚动时  
              　　  alert("滑轮向上滚动");  
           　　 }  
           　　 if (e.detail< 0) { //当滑轮向下滚动时  
               　　 alert("滑轮向下滚动");  
            　　}  
       　　 }  
   　　 }  
    　　　//给页面绑定滑轮滚动事件  
    　　if (document.addEventListener) {//firefox  
        　　document.addEventListener(‘DOMMouseScroll‘, scrollFunc, false);  
    　　}  
    　　//滚动滑轮触发scrollFunc方法  //ie 谷歌  
    　　window.onmousewheel = document.onmousewheel = scrollFunc;   
    </script> 

 

4，判断鼠标、滚动条上下滚动

            var windowTop = 0;
            $(window).scroll(function() {
                var scrolls = $(this).scrollTop();
                if(scrolls < 5 || scrolls <= windowTop) {
                    // 向上滚动显示
                    console.log(‘向上‘)
                    windowTop = scrolls;
                } else {
                    // 向下滚动隐藏
                    console.log(‘向下‘)
                    windowTop = scrolls;
                }
            });

 

 

 

。