使用ScrollMagic检测滚动方向

我想在用户向下滚动页面时隐藏我的站点标题（在ScrollMagic中很简单）——但我不确定是否也可以使用ScrollMagic来检测用户是否向上滚动，如果是，则再次显示标题

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

谢谢你的帮助

---

Dan

对于这个简单的效果，不要使用scrollmagic。您可以尝试HeadloomJS。

您可以在场景中使用

.on（“更新”，function（）{…}

）

这是我刚刚为一个新页面所做的一些事情。中间带“#header”位于另一个DIV中，该DIV具有

位置：fixed

，是“#header”和

top:-80px；

”的两倍高，因此

header

根据滚动方向上下移动80 px（即在可见区域内外移动）：

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

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

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

这将返回“反向”或“正向”，并在此基础上触发某些内容

---

-干杯。

现在您可以使用GSAP的官方滚动插件，该插件包含与每个方向相关的事件。