0

ユーザーがスクロールするときにページ上のいくつかの見出しをアニメーション化 (フェードイン) しようとしていますが、最初の見出しに到達すると、まだ到達しているかどうかに関係なく、すべてがフェードインします。

誰かが私が間違っている場所を理解するのを手伝ってくれますか? jQuery は次のようになります。

$(window).scroll( function(){

    $('.section').each( function(i){

        var bottom_of_object = $(this).position().top + $(this).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height();

        if( $('hgroup').is('.heading1') && bottom_of_window > bottom_of_object ){

            $('.heading1').animate({'opacity':'1'},1000);                 
        }
        if( $('hgroup').is('.heading2') && bottom_of_window > bottom_of_object ){

            $('.heading2').animate({'opacity':'1'},1000);                 
        }
    });         


});

そしてマークアップ：

<section class="section">
<hgroup class="heading1">
    <h1>Title</h1>
    <h2>Sub-Title</h2>
</hgroup>
</section>
<section class="section">
<hgroup class="heading2">
    <h1>Title</h1>
    <h2>Sub-Title</h2>
</hgroup>
</section>
4

1 に答える 1

0

hgroupがheading1またはheading2などであるかどうかを判断するために条件を実行する場合、特定のhgroupを指定していないため、条件は常にtrueになります（ページにheading1またはheading2が存在すると仮定します。したがって、これらの.is条件は役に立ちません.

編集: console.write または alert または breakpoints を実行して、両方の高さの値を確認します。変なものが見つかるかどうかを確認してください。

例えば..

alert('Bottom of Object: ' + bottom_of_object + '\nBottom Of Window: ' + bottom_of_window);

それを行い、スクロール機能に入れて、スクロールするときにいくつかの値を確認できるようにします。それはあなたを正しい道に導くはずです。

EDIT EDIT：このページの「正しい」答えを参照してください：スクロール後に要素が表示されるかどうかを確認してください

于 2013-09-12T13:43:05.833 に答える