Question

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

ricky部分是对于初始滚动我可以为主站点包装器设置一个简单的偏移量，但对于在页面滚动过程中任何时候都可能发生的scollup，我不知道我怎么能使用ScrollMagic＆＃39;实现这一目标的事件？

任何帮助表示感谢。

丹

Answer 1

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

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

这将返回“REVERSE”或“FORWARD”，并在此基础上触发。

-cheers。

Answer 2

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

这是我刚刚为新页面做的事情。补丁＃＃标题＆＃39;在另一个有position: fixed的DIV里面，是＆＃39;＃header＆＃39;和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。

使用ScrollMagic检测滚动方向

3 个答案: