1

我的网站上有一个固定位置的标题，当它位于页面顶部时，它具有 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>

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

4

1 回答 1

1

将 CSS3transition与 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>
于 2013-03-06T21:55:59.047 回答