判断滚动条向上还是向下

经常会遇到的以下情形：

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

实现滚动动画效果：向下滚动 左右两边的内容向中间移动，而向上滚动 两个内容又退回到左右两边；又或者向下滚动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值让其出现。改变幅度与滚动幅度正相关。透明度那个也是同理

复制代码

Hello World

Hello World