JQuery Scroll Animate Color

Question

我的网站上有一个固定的位置标题，当它位于页面顶部时，它具有Alpha透明度。当用户滚动到页面顶部时，它会动画为纯色。但是，当用户滚动回页面顶部时，我希望颜色返回到alpha透明度。不幸的是，据我所知，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>

关于如何做到这一点的任何想法？

Answer 1

将CSS3 transition与jQuery一起使用：

您可以将CSS3过渡到header附加到自定义类中，您可以在其中设置所需的颜色。
与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>