jquery - 使用 jquery 向下滚动 15% 后更改 div 颜色

Question

我在下面有这个 jquery 代码，它使 div 滚动。但我也希望它在距离顶部下降 15% 时将 div 颜色更改为 #32200F。然后在距离顶部不到 15% 时返回原始背景。

<script type="text/javascript">
        $().ready(function() {
                var $scrollingDiv = $("#navbar");

                $(window).scroll(function(){            
                        $scrollingDiv
                                .stop()
                                .animate({"marginTop": ($(window).scrollTop() + 0) + "px"}, "slow" );
                });
        });
</script>

这是我原始背景的 CSS 代码。我可以将其设为一个类以使其更容易：

#navbar {
     /* Fallback for web browsers that don't support RGBa */
     background-color: rgb(0, 0, 0);
     background-color: rgba(50,32,15,0.5);     
     /* For IE 5.5 - 7*/
     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c32200F, endColorstr=#4f32200F);
     /* For IE 8*/
     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c32200F, endColorstr=#4f32200F)";
}

Answer 1

尝试：

$(document).ready(function () {
   var $scrollingDiv = $("#navbar");

   $(window).scroll(function () {
       $scrollingDiv.stop()
           .animate({
           "marginTop": ($(window).scrollTop() + 0) + "px"
       }, "slow");
       $scrollingDiv.css("background-color", (($(window).scrollTop() / $(document).height()) > 0.15) ? "orange" : "");
     });
});

演示

Answer 2

<script type="text/javascript">
    $().ready(function() {
            var $scrollingDiv = $("#navbar");

            $(window).scroll(function(){            
                    $scrollingDiv
                            .stop()
                            .animate({"marginTop": ($(window).scrollTop() + 0)+ "px"},"slow");
                           $(".yourdiv").css('background-color', 'blue');
            });
    });