Question

我希望我的边栏在用户向下滚动到某个元素下方时更改颜色。我希望背景从透明变为黑色，但是要慢慢地使其看起来像是逐渐变为黑色。下面我有一些旧代码，我正在尝试对其进行修改。

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

Answer 1

您可以在sidebar类的CSS上添加一个transition，以使其从一个淡入另一个。可能看起来像这样：

transition: background-color 0.5s ease;

通用语法为transition: <property> <duration> <timing-function> <delay>;。 Mozilla developer page on transitions进一步介绍了如何使用它们。

Answer 2

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

.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");
      }

Answer 3

这是一个例子

$( 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>

jQuery：当div达到特定高度时更改背景颜色

3 个答案: