使用 ScrollMagic 检测滚动方向

Question

当用户向下滚动页面时，我想隐藏我的站点标题（在 ScrollMagic 中很容易做到） - 但我不确定我是否也可以使用 ScrollMagic 来检测用户是否正在向上滚动，如果是这样再次显示标题。

棘手的部分是，对于初始向下滚动，我可以为主站点包装器设置一个简单的偏移量，但是对于在页面滚动过程中任何时候都可能发生的 scollup，我不确定如何使用 ScrollMagic 的事件来实现这一点？

任何帮助表示赞赏。

担

Answer 1

如果您使用 ScrollMagic，您可以检查事件 scrollDirection。

scene.on('enter',function(event){
     console.log(event.scrollDirection);
});

这将返回“REVERSE”或“FORWARD”，并基于此您可以触发某些内容。

-干杯。

Answer 2

您可以.on("update", function() { … }在您的场景中使用。

这是我刚刚为新页面所做的事情。补间 '#header' 位于另一个 DIV 中，该 DIVposition: fixed是 '#header' 的两倍top: -80px;，因此header向上或向下移动 80px（即进出可见区域），具体取决于滚动方向：

var controller = new ScrollMagic.Controller();

var i1 = 0; 
var i2 = 0; 

var scene = new ScrollMagic.Scene()
.addTo(controller)
.on("update", function() {
    var x1 = controller.info("scrollDirection");
    var x2 = $(window).scrollTop();
    var x3 = 400;
        if ( x1 == "REVERSE" && x2 >= x3 && i1 == 0) {
            TweenLite.fromTo("#header", 0.3, {top: "0px"}, {top: "80px", ease: Linear.easeNone});
            i1++;
            i2 = 0;
        }
        if ( x1 == "FORWARD" && x2 > x3 && i2 == 0) {
            TweenLite.fromTo("#header", 0.3, {position: "absolute", top: "80px"}, {top: "0px", ease: Linear.easeNone});
            i1 = 0;
            i2++;
        }       
});

i1和i2用于过滤冗余事件以避免在同一方向上出现多个补间。

x3 定义页眉在页面顶部保持可见的时间。