使用ScrollMagic检测滚动方向

Question

我想在用户向下滚动页面时隐藏网站页眉（在ScrollMagic中很容易实现） - 但我不确定是否可以使用ScrollMagic检测用户向上滚动，如果可以则再次显示页眉。问题是，在初始向下滚动时，我可以为主站点包装设置简单的偏移量，但对于任何可能在页面滚动期间发生的向上滚动，我不知道如何使用ScrollMagic事件来实现这一点。欢迎任何帮助。

丹

- danjothebanjo

---

现在你可以使用GSAP的官方滚动插件ScrollTrigger，它具有与每个方向相关的事件。 - Zach Saucier

Answer 1

如果您使用ScrollMagic，您可以检查滚动方向事件。

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

这将返回“REVERSE”或“FORWARD”，根据这个结果，你可以触发某些操作。-干杯。

- Frederick Jaime

Answer 2

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

这是我为一个新页面刚刚做的事情。被缓动的'#header'处于另一个DIV内，该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定义了标题栏在页面顶部保持可见的时间长度。

- Johannes

Answer 3

不要使用scrollmagic来实现这个简单的效果。你可以尝试headroomjs。

- Nic