js判断页面上滚下滚

2017-09-19  本文已影响0人  李佳明先生

今天做了个导航栏,客户要求的效果是当页面下滚时导航栏消失,上滚时导航栏出现。以下是代码:

$(document).ready(function(){
        var p=0,t=0;

        $(window).scroll(function(e){
            p = $(this).scrollTop();

            if(t<=p){//下滚
//                console.log('down');
                $('.nav').css({
                    display:'none'
                })
            }

            else{//上滚
//                console.log('up');
                $('.nav').css({
                    display:'block'
                })
            }
            console.log(p+'---'+t)
//            t=p;
            setTimeout(function(){t = p;},0);
        });
    });

代码是从网上找的,本人试了,把定时器注释掉,用t=p也可以做到同样的效果,不知道原创为什么要用这个定时器,本人分析以下(不知道对不对,勿喷,只是提供一种思路),因为定时器是异步的,又因为js是单线程,所以运行到定时器的时候,会把定时器里的回调推入到另一个执行环境(假设),定时器执行是0ms,当用户快速滑动的时候,定时器就会依次推入到这个执行环境中,然后...(作者也不知道了)

上一篇 下一篇

猜你喜欢

热点阅读