jquery：当div达到一定高度时更改背景色

当用户向下滚动到某个元素下方时，我希望侧边栏的颜色发生变化。我希望背景从透明变为黑色，但速度要慢，看起来像是在逐渐变为黑色。下面我有一些旧代码，我正试图修改它

$(window).on("load",function() {
  $(window).scroll(function() {
    var windowBottom = $(this).scrollTop() + $(this).innerHeight();
    $(".project").each(function() {
      /* Check the location of each desired element */
      var objectBottom = $(this).offset().top + $(this).outerHeight();

      /* If the element is completely within bounds of the window, fade it in */
      if (objectBottom < windowBottom) { //object comes into view (scrolling down)
        if ($(".sidebar").css("background-color","transparent")) {$(".sidebar").css("background-color","black");}
      } else { //object goes out of view (scrolling up)
        if ($(".sidebar").css("background-color","black")) {$(".sidebar").css("background-color","transparent");}
      }
    });
  }).scroll(); //invoke scroll-handler on page-load
});

您可以在

侧栏

类中的CSS中添加一个，使其从一个类淡入另一个类。可能是这样的：

transition: background-color 0.5s ease;

---

广义语法是

transition:。关于如何使用它们，本文进行了更深入的探讨。
我还没有测试过它，但这里有一个想法。
您可以在两个单独的CSS类之间切换，一个是透明背景色，另一个是黑色背景色，而不是在scroll事件中切换背景色。然后在这些类中，添加一个transition delay属性，如下所示：

transition: background-color 0.5s ease;


。侧栏{
身高：100%；
宽度：130px；
边缘顶部：34px；
位置：固定；
z指数：1；
溢出x：隐藏；
填充顶部：35px；
}
.黑色背景{
背景色：黑色；
过渡延迟：1s；
}
.背景清楚{
背景色：透明；
过渡延迟：1s；
}
以下是一个示例


$（窗口）.ready（函数（）{
var wHeight=$（窗口）.height（）；
$（“.slide”）
.高度（wHeight）
.卷轴({
滚动偏移：-50，
滚动视图：功能（元素）{
变量bgColor=元素数据（“背景”）；
$（'body'）.css（'background-color'，bgColor）；
}
});
});
正文{
过渡：背景1秒轻松；
背景：#3498db；
}
p{
颜色：#ecf0f1；
字号：2em；
文本对齐：居中；
}
跨度{
明确：两者皆有；
字体大小：0.7em；
颜色：#bdc3c7；
}
.滑进去{
显示：表格；
身高：100%；
宽度：100%；
填充：0.3em；
}
.幻灯片.内页{
显示：表格单元格；
宽度：100%；
明确：两者皆有；
垂直对齐：中间对齐；
文本对齐：居中；
}

报表1

报表2

报表3

第4站

祝你今天愉快

您的最佳选择是放置一个额外的div，覆盖褪色元素的区域。然后淡入/淡出该元素。否则，没有简单的跨浏览器方式来设置背景颜色的动画。如果你不喜欢这个，谷歌背景色动画库。