使用ScrollMagic检测滚动方向

Question

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

最重要的是，对于最初的滚动，我可以为主站点包装器设置一个简单的偏移量，但对于在页面滚动过程中随时可能发生的乱码，我不确定如何使用ScrollMagic的事件来实现这一点？

感谢您的帮助。

丹

Answer 1

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

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

这将返回"REVERSE“或"FORWARD"，在此基础上您可以触发一些东西。

-cheers。

Answer 2

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

这是我刚刚为新页面做的一些事情。补间的'#header‘在另一个具有position: fixed的DIV中，它比'#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定义页眉在页面顶部保持可见的时间。

Answer 3

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