1

私の Web サイトには、ページの上部にあるときにアルファ透明度を持つ固定位置のヘッダーがあります。ユーザーがページの上部を超えてスクロールすると、単色にアニメーション化されます。ただし、ユーザーがページの上部にスクロールして戻ると、色をアルファ透明度に戻す必要があります。残念ながら、私が読んだことから、JQuery カラー アニメーションは RGBA 値をサポートしていません。ユーザーが下にスクロールすると色が変わりますが、ページの上部に戻ったときに色を変えることができません。

<script type="text/javascript">
    $(window).scroll(function() {
        $("#header").css("position", "fixed");
        if ($(window).scrollTop() > 0) {
            $("header").animate({backgroundColor:'#2b2b2b'}, 'slow');
        }
        if ($(window).scrollTop() <= 0) {
            $("header").animate({backgroundColor: '#000000'}, 'slow');
        }
    });
</script>

これを行う方法についてのアイデアはありますか？

4

1 に答える 1

1

transitionjQuery でCSS3 を使用します。

header目的の色を設定できるカスタム クラスにCSS3 トランジションを追加できます。
jQuery を使用する場合よりも、そのクラスを追加/削除するだけです。

LIVE DEMO

$(window).scroll(function() {
    var addRemClass = $(window).scrollTop() > 0 ? 'addClass' : 'removeClass';
    $("header")[addRemClass]('bgChange');
});

CSS:

header{
  background:#000;
  padding:20px;
  color:#fff;
  width:100%;
  transition:0.8s;   /* Our nice transition (you can also use 'ms' values) */
}

header.bgChange{
  background:#2b2b2b;/* I used #f00 in the demo to make it more obvious :) */
}

jQuery UI を使用するソリューション: より多くのブラウザーをサポートするには、次のようにします。

LIVE DEMO

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script>
    $(window).scroll(function() {
        $("header").stop().animate({
          backgroundColor: $(window).scrollTop() > 0 ? '#2b2b2b' : '#000'
        }, 800);
    });
</script>
于 2013-03-06T21:55:59.047 に答える