使用ScrollMagic來檢測滾動方向

當用戶向下滾動頁面時，我想隱藏我的網站標題（在ScrollMagic中很簡單） - 但我不確定我是否也可以使用ScrollMagic來檢測是否用戶正在向上滾動，如果是，則再次顯示標題。使用ScrollMagic來檢測滾動方向

該ricky部分是對於最初的scrolldown我可以爲主站點包裝設置一個簡單的偏移量，但對於在頁面滾動過程中可能發生的任何點的scollup我不知道我怎麼能讓我們ScrollMagic的事件爲了達成這個？

任何幫助表示讚賞。

丹

來源

2015-11-27 danjothebanjo

不要使用scrollmagic這個簡單的效果。你可以試試headroomjs。

來源

2015-11-27 15:26:46 Nic

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

這是我剛剛爲新頁面做的事情。補間的'#header'位於另一個DIV中，具有position: fixed，是'#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定義標題在頁面頂部保持可見狀態的時間。

來源

2015-12-05 02:11:35 Johannes

如果您使用ScrollMagic，則可以檢查事件scrollDirection。

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

這將返回「REVERSE」或「FORWARD」，並基於此可以觸發某些內容。

-cheers。

來源

2016-11-15 20:25:55

使用ScrollMagic來檢測滾動方向

回答

相關問題