javascript - 如果 div 在滚动时可见，则设置动画并更改主体的背景颜色

Question

我正在尝试使用 jQuery 更改我的 body 的 background-color，当特定的 div(在我的示例中为红色)在滚动时可见。如果 div 不可见，则背景颜色应随动画再次更改。我试过跟随，但它不起作用。这里还有一个代码笔片段:https://codepen.io/STWebtastic/pen/qpKdeo

$(window).scroll(function(){
  $('.m-box--red').each(function(){
    if(isScrolledIntoView($(this)) ){
      $("html body").animate({ backgroundColor: "red" }, 300);
  console.log('hello');
    }
    else{
      $("html body").animate({ backgroundColor: "white" }, 300);
  console.log('hello');
    }
  });
});

function isScrolledIntoView(elem){
    var $elem = $(elem);
    var $window = $(window);

    var docViewTop = $window.scrollTop();
    var docViewBottom = docViewTop + $window.height();

    var elemTop = $elem.offset().top;
    var elemBottom = elemTop + $elem.height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

body {
  box-sizing: border-box;
  margin: 0;
}

.m-box {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #75989F;
  margin-bottom: 100px;
  cursor: pointer;
  color: white;
  transition: background-color 0.3s;
  height: 300px;
}

.m-box--second {
  background-color: #68808E;
}

.m-box--third {
  background-color: #CDC2AA;
  color: gray;
}

.m-box--red {
  background-color: #D29B8E;
  border: 1px solid lightgray;
}

.m-box__text {
  font-size: 45px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="m-box">
  <p class="m-box__text">Quisque velit nisi, pretium ut lacinia in, elementum id enim.</p>
</div>

<div class="m-box m-box--second">
  <p class="m-box__text">Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt. Sed porttitor lectus nibh. Praesent sapien massa, convallis a pellentesque
    nec, egestas non nisi.</p>
</div>

<div class="m-box m-box--red">
  <p class="m-box__text">Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec sollicitudin molestie malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p>
</div>

<div class="m-box m-box--third">
  <p class="m-box__text">Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec sollicitudin molestie malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p>
</div>

<div class="m-box">
  <p class="m-box__text">Quisque velit nisi, pretium ut lacinia in, elementum id enim.</p>
</div>

Answer 1

一个问题可能是这样的:

jQuery animate backgroundColor

另一个问题是您遍历所有 div，因此主体背景将获得循环最后一项中的条件颜色。所以在你的情况下，总是白色的。

所以我认为您可以只在 background 属性上添加带有过渡的 addClass 并且只测试红色 div。

工作代码笔:

https://codepen.io/Alvan/pen/rpKLjY?editors=1111

$(window).scroll(function(){
  $('.m-box--red').each(function(){
    if(isScrolledIntoView($(this)) ){
      $("body").addClass('red');
    }
    else{
      $("body").removeClass('red');
    }
  });
});

function isScrolledIntoView(elem){
    var $elem = $(elem);
    var $window = $(window);

    var docViewTop = $window.scrollTop();
    var docViewBottom = docViewTop + $window.height();

    var elemTop = $elem.offset().top;
    var elemBottom = elemTop + $elem.height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

body {
  box-sizing: border-box;
  margin: 0;
  background: white;
  transition: background .3s;
}

body.red {
  background: red;
}

.m-box {
  display: flex;
  align-items: center;
  padding: 10px; 
  background-color: #75989F;
  margin-bottom: 100px;
  cursor: pointer;
  color: white;
  transition: background-color 0.3s;
  height: 150px;
}
.m-box:hover {
    background-color: lighten(#75989F, 10);
  }
  
.m-box--second {
    background-color: #68808E;
}
.m-box--second hover {
    background-color: lighten(#68808E, 10);
}

  
.m-box--third {
    background-color: #CDC2AA;
    color: gray;
}

.m-box--third:hover {
   background-color: lighten(#CDC2AA, 10);
}
  
.m-box--red {
    background-color: #D29B8E;
    border: 1px solid lightgray;
}

.m-box--red :hover {
    background-color: lighten(#D29B8E, 10);
}
  
  
.m-box__text {
  font-size: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="m-box">
  <p class="m-box__text">Quisque velit nisi, pretium ut lacinia in, elementum id enim.</p>
</div>

<div class="m-box m-box--second">
  <p class="m-box__text">Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt. Sed porttitor lectus nibh. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p>
</div>

<div class="m-box m-box--red">
  <p class="m-box__text">Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec sollicitudin molestie malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p>
</div>

<div class="m-box m-box--third">
  <p class="m-box__text">Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec sollicitudin molestie malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p>
</div>

<div class="m-box">
  <p class="m-box__text">Quisque velit nisi, pretium ut lacinia in, elementum id enim.</p>
</div>

如果您希望该功能在顶部出现在屏幕上直到底部从屏幕上消失时起作用，请更改条件 函数 isScrolledIntoView 到

if(elemTop <= docViewBottom && elemBottom >= docViewTop) {
    return true;
}

$(window).scroll(function(){
  $('.m-box--red').each(function(){
    if(isScrolledIntoView($(this)) ){
      $("body").addClass('red');
    }
    else{
      $("body").removeClass('red');
    }
  });
});

function isScrolledIntoView(elem){
    var $elem = $(elem);
    var $window = $(window);

    var docViewTop = $window.scrollTop();
    var docViewBottom = docViewTop + $window.height();
  
    var elemTop = $elem.offset().top;
    var elemBottom = elemTop + $elem.height();
  
    if(elemTop <= docViewBottom && elemBottom >= docViewTop) {
      return true;
    }
}

body {
  box-sizing: border-box;
  margin: 0;
  background: white;
  transition: background .3s;
}

body.red {
  background: red;
}

.m-box {
  display: flex;
  align-items: center;
  padding: 10px; 
  background-color: #75989F;
  margin-bottom: 100px;
  cursor: pointer;
  color: white;
  transition: background-color 0.3s;
  height: 150px;
}
.m-box:hover {
    background-color: lighten(#75989F, 10);
  }
  
.m-box--second {
    background-color: #68808E;
}
.m-box--second hover {
    background-color: lighten(#68808E, 10);
}

  
.m-box--third {
    background-color: #CDC2AA;
    color: gray;
}

.m-box--third:hover {
   background-color: lighten(#CDC2AA, 10);
}
  
.m-box--red {
    background-color: #D29B8E;
    border: 1px solid lightgray;
}

.m-box--red :hover {
    background-color: lighten(#D29B8E, 10);
}
  
  
.m-box__text {
  font-size: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="m-box">
  <p class="m-box__text">Quisque velit nisi, pretium ut lacinia in, elementum id enim.</p>
</div>

<div class="m-box m-box--second">
  <p class="m-box__text">Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla porttitor accumsan tincidunt. Sed porttitor lectus nibh. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p>
</div>

<div class="m-box m-box--red">
  <p class="m-box__text">Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec sollicitudin molestie malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p>
</div>

<div class="m-box m-box--third">
  <p class="m-box__text">Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec sollicitudin molestie malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p>
</div>

<div class="m-box">
  <p class="m-box__text">Quisque velit nisi, pretium ut lacinia in, elementum id enim.</p>
</div>