Используйте ScrollMagic для определения направления прокрутки

Question

Я хотел бы скрыть заголовок своего сайта, когда пользователи прокручивают страницу (просто сделать это в ScrollMagic) - но я не уверен, что я могу также использовать ScrollMagic для обнаружения if пользователь прокручивается, и если это так, чтобы снова отобразить заголовок.

Яркая часть - это то, что для начального прокрутки я могу установить простое смещение для основной обертки сайта, но для scollup, который может произойти в любой момент во время прокрутки страницы, я не уверен, как я могу провести события ScrollMagic для достижения этой цели?

Любая помощь приветствуется.

Dan

Answer 1

Не используйте scrollmagic для этого простого эффекта. Вы можете попробовать headroomjs.

Answer 2

Вы можете использовать .on("update", function() { … } в своей сцене.

Вот что я только что сделал для новой страницы. Tweened «#header» находится внутри другого 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 определяет, как долго заголовок остается видимым в верхней части страницы.

Answer 3

Если вы используете ScrollMagic, вы можете проверить направление прокрутки события.

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

Это будет возвращать «REVERSE» или «FORWARD», и на его основе вы можете запустить что-то.

-cheers.