2

ユーザーがページを下にスクロールしたときにサイトのヘッダーを非表示にしたいのですが (ScrollMagic で簡単に実行できます)、ユーザーが上にスクロールしているかどうかを検出するために ScrollMagic を使用できるかどうかはわかりません。ヘッダーを再度表示します。

厄介な部分は、最初のスクロールダウンではメイン サイト ラッパーの単純なオフセットを設定できることですが、ページ スクロール中の任意の時点で発生する可能性があるスクロールでは、これを達成するために ScrollMagic のイベントをどのように使用できるかわかりません。

どんな助けでも感謝します。

ダン

4

3 に答える 3

6

ScrollMagic を使用する場合は、イベント scrollDirection を確認できます。

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

これは「REVERSE」または「FORWARD」を返し、それに基づいて何かをトリガーできます。

-乾杯。

于 2016-11-15T20:25:55.400 に答える
5

.on("update", function() { … }あなたのシーンでお使いいただけます。

これは、新しいページのために私がしたことです。トゥイーンされた '#header' はposition: fixed、 が '#header' の 2 倍の高さである別の DIV 内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++;
        }       
});

i1i2同じ方向の複数のトゥイーンを避けるために冗長なイベントをフィルタリングするために使用されます。

x3 は、ヘッダーがページの上部に表示される時間を定義します。

于 2015-12-05T02:11:35.070 に答える