1

ユーザーがページ内の特定の要素をスクロールした後、スクロールして元に戻すと、再びアニメーション化されると、複製されたナビゲーションが表示されるようにする際に、jquery コードに問題があるようです。

私が書いたjqueryコードは次のとおりです。

$(window).scroll(function() {
var homeHeight = $('#header').outerHeight() + $('.homeIntro').outerHeight();
var scrollPosition = $(this).scrollTop(); 
if( homeHeight <= scrollPosition ) {
    $('#clonedHeader').animate({'top': '0'}, 300);      
} else {
    $('#clonedHeader').animate({'top': '-100px'}, 300); 
}

});

ここにフィドルがあります：http://jsfiddle.net/ABdLh/

homeIntro の部分をスクロールすると表示される複製されたヘッダーが表示されます。

どんな助けでも大歓迎です！ありがとう！

4

2 に答える 2

1

うん、それ (jQuery が選択されていない) が、機能しない理由の中心的な問題でした。しかし、いくつかの提案 -

このように html マークアップを複製するのは本当によくありません。jQuery/CSS を使用して、さまざまなスクロール位置でヘッダーがどのように見えるかを調整する必要があります。

また、Chrome/Firefox でコンソールを使用すると、デバッグに少し役立つ場合があります。jQuery がなくてもすぐにエラーが発生します。ここで私のフィドルを開くと、スクロールに基づいて関数が起動される場所を示すために、そこに console.log() ステートメントを残しました。

このようなヘッダーをアニメーション化すると、多くの問題が発生します。jQuery アニメーションを使用すると、非常に速く上下にスクロールするとビルドアップの問題が発生する可能性があり、同じヘッダーが同時にページに表示される可能性があります。注 - あなたが言及した停止方法はこれに役立ちますが、ほとんどのアニメーションの問題 (特にホバー) では十分ではなく、「HoverIntent」などのプラグインを調べる必要があります。

最後に、常に更新される関数の外でできるだけ多くの変数を宣言 + 計算することをお勧めします。比較対象のヘッダーの高さを継続的に再計算する必要はありません。これは固定数になります。 .

// this height will be the same, you dont need to constantly calculate it on scroll
var homeHeight = $('#header').outerHeight() + $('.homeIntro').outerHeight(),
    scrollPosition;

$(window).on('scroll', function () {
    scrollPosition = $(this).scrollTop();
    animateHeight(scrollPosition);
});

function animateHeight(scrollPosition) {
    if (scrollPosition >= homeHeight) {
        console.log('yes');
        $('#clonedHeader').animate({
            'top': '0'
        }, 300);
    } else {
        console.log('no');
        $('#clonedHeader').animate({
            'top': '-100px'
        }, 300);
    }
}

http://jsfiddle.net/ndreckshage/ecUAc/

于 2013-02-02T15:55:24.790 に答える
1

以前、いくつかのコードを見落としていました。-method を追加するだけ.stop()で、動作させることができます:

if(homeHeight <= scrollPosition) {
    $('#clonedHeader').stop().animate({'top': '0'}, 300);      
} else {
    $('#clonedHeader').stop().animate({'top': '-100px'}, 300); 
}

ここで試してみてください。

于 2013-02-02T15:34:08.850 に答える