使用jquery向下滚动15％后更改div颜色[关闭]

Posted 2023-05-07

【中文标题】使用jquery向下滚动15％后更改div颜色[关闭]

【英文标题】：change div color after scrolling 15% down with jquery [closed]

【发布时间】：2013-03-27 12:56:23

【问题描述】：

我在下面有这个 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)";

【问题讨论】：

嗨，欢迎来到 SO！你应该告诉我们你尝试了什么。更具体地说明您遇到的问题。目前，您的问题类似于“请给我代码以满足我的要求”。

颜色是逐渐变化还是突然变化？ 15% 与页面高度或视口高度有关？请更具体一些，并展示您到目前为止所做的尝试。

@FabrizioCalderan 它与页面高度有关......它可以是 250px 以使其更容易。

见this

@A.V 效果很好！唯一的问题是它回到白色，我原来的背景有一些透明度。我很抱歉没有更具体。我将尝试编辑我的问题以使其更清楚。

【参考方案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" : "");
     );
);

Demo

【讨论】：

是的，它完美运行！非常感谢！

【参考方案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');
            );
    );

【讨论】：

这对于更改颜色很有用，但是当它滚动回顶部时它不会返回到原始颜色。

在if条件下使用它......