0

jquery UIライブラリを使用して、別の質問からこのコードを使用しています

$(window).scroll(function() {
    $("#about").stop().animate({
       backgroundColor: $(window).scrollTop() > 200 ? '#000' : '#fff',
    }, 1000);
});

必要なCSSはすべて

#about {background-color:#fff;}

これは完全に機能しますが、別のdivで異なる色を使用するだけで、まったく同じ効果を得ようとしています。

だから私はコピーして貼り付け、設定を変更しようとしましたが、何らかの理由で、ユーザーがポイントまでスクロールしたときではなく、ページが読み込まれるたびに #contact がフェードインします。

私のhtmlは、幅と高さが100％のdivを互いに重ねただけです。

ありがとう！

*JSフィドル*

http://jsfiddle.net/xZyzv/

4

2 に答える 2

1

スクリプトに JQuery ファイルを含めると、機能します。JSFIDDLE で、フレームワークと拡張機能 (左側) を「No Library(Pure js)」から「Jquery 1.6.4」に変更し、フィドルを実行します。

私のコメントを参照して、速くスクロールした場合にのみフェード効果が見られる理由を確認してください。

この JavaScript を使用して、#contact div に到達したときのフェード効果を確認できます。

 $(window).scroll(function() {
        $("#about").stop().animate({
          backgroundColor: $(window).scrollTop() > 200 ? '#000' : '#fff',
        }, 1000);
    if($(window).scrollTop() > 500){
    $("#contact").stop().animate({
          backgroundColor: $(window).scrollTop() > 500 ? '#fff' : '#000',
        }, 1000);
    }

    });
于 2013-07-06T06:10:08.880 に答える
0

他のdivにも同じ機能を追加しました。おそらく、スクロールの 200 の値を調整して、その div の近くにいるときにのみフェードするようにする必要があります。

ここでフィドル

$(window).scroll(function() {
        $("#home").stop().animate({
          backgroundColor: $(window).scrollTop() > 200 ? '#00f' : '#fff',
        }, 1000);
    });
$(window).scroll(function() {
        $("#about").stop().animate({
          backgroundColor: $(window).scrollTop() > 200 ? '#0f0' : '#fff',
        }, 1000);
    });

$(window).scroll(function() {
        $("#contact").stop().animate({
          backgroundColor: $(window).scrollTop() > 200 ? '#0ff' : '#f00',
        }, 1000);
    });
于 2013-07-06T15:42:16.207 に答える