判断滚动条向上还是向下

经常会遇到的以下情形：

导航向下滚就隐藏，向上滚动就显示

实现滚动动画效果：向下滚动 左右两边的内容向中间移动，而向上滚动 两个内容又退回到左右两边；又或者向下滚动canvas放大，反之缩小

这些动画原理当知少不了scrollTop()函数；

scrollTop() 定义和用法

scrollTop() 方法设置或返回被选元素的【垂直滚动条位置】。

Note：

当滚动条位置位于最顶部时，位置是0；
当用于返回位置时：
    该方法返回 第一个匹配元素的滚动条的垂直位置。语法：$(selector).scrollTop()
当用于设置位置时：
    该方法设置 所有匹配元素的滚动条的垂直位置。语法：$(selector).scrollTop(position) 参数position ： 规定以像素为单位的垂直滚动条位置。

如何判断是up还是down

var a;
           
        function scroll( fn ) {
            var beforeScrollTop = document.body.scrollTop,
                fn = fn || function() {};
            window.addEventListener("scroll", function() {
                var afterScrollTop = document.body.scrollTop,
                    delta = afterScrollTop - beforeScrollTop;
                if( delta === 0 ) return false;
                fn( delta > 0 ? "down" : "up" );
                beforeScrollTop = afterScrollTop;
            }, false);
        }
      //第一种写法
        scroll(function(direction) { 
            // console.log(direction);
            a =  direction;
       });
     //第二种写法执行完事件后的回调函数
       function fn(direction) { 
            // console.log(direction);
            a = direction;
        };

        window.onscroll=function(){
            console.log(a);
        }
 　

 来解决以上情形

  通过判断向上或者向下，后，就是原理问题；

 

  案例~~~~滚动内容往中间或两边移动效果

原理：先给元素设置一个left值让其隐藏，当滚动条到一定位置，改变其left值让其出现。改变幅度与滚动幅度正相关。透明度那个也是同理

<!DOCTYPE html>
<html>
<head>
    <title>Hello World</title>
    <style type="text/css">
        #wrapper {height: 100%;overflow: hidden;}
        #screen {width: 300px;height: 800px;}
        #mark{position: relative;width: 200px;height: 50px;font-size: 60px;left: -100px;}
        #cover{position: relative;width: 200px;height: 50px;font-size: 60px;left: 1360px;}
        #dialog {position: relative;width: 200px;height: 50px;margin: 0 auto;font-size: 60px;line-height: 50px;opacity: 0;}
        #ohyeah {height: 800px;}
    </style>
    <script src="Lazyload.js/jquery.min.js" type="text/javascript"></script> 
</head>
<body>
<div id="wrapper">
    <div id="screen"></div>
    <div id="mark">Hello World</div>
    <div id="dialog"></div>
    <div id="cover">Hello World</div>
    <div id="ohyeah"></div>
</div>
<script type="text/javascript">

    var beforeScrollTop = $(window).scrollTop();
    $(window).scroll(function() {
        var afterScrollTop = $(window).scrollTop(),
            updown = afterScrollTop - beforeScrollTop;
        if( updown === 0 ) return false;            
        beforeScrollTop = afterScrollTop;
        console.log(updown > 0 ? "down" : "up");
        
        var isUpDown = updown > 0 ? "down" : "up";  //判断往上还是往下
        var scrollTop = $(window).scrollTop();
        if(isUpDown == 'down' && scrollTop >= 400) {  //数据自取，可依据元素的scrollTop值
            var markLeft = parseInt($('#mark').css('left'));
            left = markLeft + (scrollTop/20);   //值的变动与滚动幅度现相关  ， 自行调节
            console.log(markLeft);
            if(markLeft <= 640) {   //这个值是让他滚动到一个边界  ，  自行调节  
                $('#mark').css('left', left + 'px');   //举例一个元素，其他的自己来咯
            }
            
        } else if(isUpDown == 'up' && scrollTop <= 700) {   //往上时做相反  
            var markLeft = parseInt($('#mark').css('left'));
            left = markLeft - (scrollTop/30);   
            if(markLeft >= -100) {
                $('#mark').css('left', left + 'px');
            }
        }

        //其他的如opacity left 同理，自己实践一下吧
    });
        
    
</script>
</body>
</html>

 

 posted on 2017-10-25 12:37  bahoo  阅读(2428)  评论(0)  编辑  收藏  举报