scroll - 使用 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 中，它具有position: fixed, 是 '#header' 的两倍并且top: -80px;，因此header根据滚动方向向上或向下移动 80 像素（即进出可见区域）：

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 定义页眉在页面顶部保持可见的时间。

Answer 3

不要为这个简单的效果使用 scrollmagic。你可以试试headroomjs。