jquery：当div达到一定高度时更改背景颜色[重复]答案

【问题标题】：jquery: change background color when div reaches a certain height [duplicate]jquery：当div达到一定高度时更改背景颜色[重复]
【发布时间】：2020-03-21 10:58:13
【问题描述】：

我希望当用户向下滚动到某个元素下方时，我的侧边栏会改变颜色。我希望背景从透明变为黑色，但慢慢地，看起来它正在褪色为黑色。下面我有一些旧代码，我正在尝试修改它。

$(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
});

侧边栏的背景是透明的，但是当您在带有图像的 div 下方滚动时，我需要将背景变为黑色。它会这样做，但它只是突然变黑。如何实现淡化效果？我尝试了 .fadeIn 和 .fadeOut 但整个侧边栏以及菜单项都会淡入淡出。我还尝试了 .animate() 但它不适用于背景颜色。我错过了一些简单的东西吗？下面是 CSS。

.sidebar {
    height: 100%;
    width: 130px;
    margin-top: 34px;
    position: fixed;
    z-index: 1;
    background-color: transparent;
    overflow-x: hidden;
    padding-top: 35px;
}

.sidebar a {
    padding: 20px 8px 20px 16px;
    text-decoration: none;
    font-size: 18px;
    color: whitesmoke;
    display: block;
}

.sidebar a:hover {
    color: #f1f1f1;
}

@media screen and (max-width:1000px) {
    .sidebar {
        visibility: hidden;
    }
}

【问题讨论】：

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

标签： jquery html css

【解决方案1】：

这是一个例子

$( window ).ready(function() {
  
    var wHeight = $(window).height();

    $('.slide')
      .height(wHeight)
      .scrollie({
        scrollOffset : -50,
        scrollingInView : function(elem) {
                   
          var bgColor = elem.data('background');
          
          $('body').css('background-color', bgColor);
          
        }
      });

  });

body {
  transition: background 1s ease;
  background: #3498db;
}
p {
  color: #ecf0f1;
  font-size: 2em;
  text-align: center;
}
span {
  clear: both;
  font-size: 0.7em;
  color: #bdc3c7;
}
.slide .inside {
  display: table;
  height: 100%;
  width: 100%;
  padding: 0 3em;
}
.slide .inside p {
  display: table-cell;
  width: 100%;
  clear: both;
  vertical-align: middle;
  text-align: center;
}

<div class="main-wrapper">
  
  <div class="slide slide-one" data-background="#3498db">
    <div class="inside">
    <p>Statement 1</p>
    </div>
  </div>
  <div class="slide slide-two" data-background="#27ae60">
    <div class="inside">
      <p>Statement 2</p>
    </div>
  </div>
  <div class="slide slide-three" data-background="#e74c3c">
    <div class="inside">
      <p>Statement 3</p>
    </div>
  </div>
  <div class="slide slide-four" data-background="#e67e22">
    <div class="inside">
      <p>Statment 4</p>
    </div>
  </div>
  <div class="slide slide-five" data-background="#9b59b6">
    <div class="inside">
      <p>Have an awesome day</p>
    </div>
  </div>  
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2542/jquery.scrollie.min_1.js"></script>

【讨论】：

【解决方案2】：

我还没有测试过，但这里有一个想法。您可以在两个单独的 CSS 类之间切换，而不是切换滚动事件的背景颜色，一个具有透明背景色，一个具有黑色背景色。然后在这些类中，添加一个转换延迟属性，如下所示：

.sidebar {
    height: 100%;
    width: 130px;
    margin-top: 34px;
    position: fixed;
    z-index: 1;
    overflow-x: hidden;
    padding-top: 35px;
}

.black-background {
  background-color: black;
  transition-delay: 1s;
}

.clear-background {
  background-color: transparent;
  transition-delay: 1s;
}

然后在你的 JavaScript 中你可以做这样的事情：

/* If the element is completely within bounds of the window, fade it in */
      if (objectBottom < windowBottom) { 
        //object comes into view (scrolling down)
        $(".sidebar").removeClass("clear-background");
        if(!$(".sidebar").hasClass("black-background)
           $(".sidebar").addClass("black-background"); // reset both
      } else { 
        //object goes out of view (scrolling up)
        $(".sidebar").removeClass("black-background");
        if(!$(".sidebar").hasClass("clear-background")) // reset both
          $(".sidebar").addClass("clear-background");
      }

【讨论】：

【解决方案3】：

您可以将transition 添加到sidebar 类的CSS 中，以便它从一个淡入到另一个。可能看起来像这样：

transition: background-color 0.5s ease;

通用语法是transition: <property> <duration> <timing-function> <delay>;。 Mozilla developer page on transitions 更深入地介绍了如何使用它们。

【讨论】：