0

スクロール位置に基づいて、1ページのWebサイトのフェードインとフェードアウトの各「セクション」を取得しようとしています。セクションを display:block のままにしたいので、 FadeIn /FadeOut ではなくFadeToメソッドを使用しています。

アイデアは、各セクションが上部から特定の距離に達したときにフェードインし、特定の要件を満たさなくなったときにフェードアウトすることです。私の現在のマークアップの試みは次のとおりですが、どこで間違いを犯しているのかを理解するのに苦労しています

関数：

function scrollFadeDiv(element, navheight) {
    var offset = element.offset();
    var offsetTop = offset.top;
    var totalScroll = offsetTop - navheight;


    if (totalScroll > 0 ){
        $(element).fadeTo('slow', 0.0); 
    } else {
        $(element).fadeTo('slow', 1.0);
    }


}

そして私のウィンドウスクロールイベント:

$(window).on('scroll', function(){
    var elWrapped = $('section');
    scrollFadeDiv(elWrapped, 75);
});

私の懸念は、live()が廃止され、delegate()がスクロール イベントで機能しないため、DOM が読み込まれた後に totalScroll 変数が継続的に更新/再計算されないことです。

前もって感謝します！

4

1 に答える 1

0

私の提案は、ウェイポイントプラグインを使用することです:

https://github.com/imakewebthings/jquery-waypoints

于 2012-07-11T15:42:42.157 に答える