在视口中 DIV 时更改 CSS 背景颜色

Question

是否可以在特定 div 出现在视口中时更改我网站的背景颜色？如果另一个 DIV 在视口中，是否可以再次更改背景颜色（即第二次）？

所以像这样：

蓝色蓝色的蓝色 ... DIV1（在视口中 = 背景色红色） 红色红色的红色 ... DIV2（在视口中 = 背景颜色为蓝色） 蓝色蓝色的蓝色

非常感谢！

Answer 1

说明

"当用户滚动到蓝色 div 的 TOP 时，body 的背景颜色变为红色。"

$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  if (scroll >= $('#blue').offset().top) {
    $('body').css('background-color', 'red');
  }
  if (scroll >= $('#black').offset().top) {
    $('body').css('background-color', 'blue');
  }
  if (scroll >= $('#black').last().offset().top) {
    $('body').css('background-color', 'green');
  }
});

#blue {
  width: 400px;
  height: 800px;
  background: blue;
}

#black {
  width: 400px;
  height: 800px;
  background: black;
}

#red {
  width: 400px;
  height: 800px;
  background: red;
  margin-bottom: 500px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="blue"></div>
<div id="black"></div>
<div id="red"></div>

Answer 2

你总是可以在媒体查询上调用它来改变你想要的特定高度或颜色的任何东西，如果我理解你的话，这里是一个例子

body {background-color:gray;}
.mygridboxes {
    display:grid;
}

.box {
    height:500px;
    width:500px;
    background-color:red;
    font-size:50px;
    text-align:center;
    margin:0 auto;
    border:10px solid white;
}

@media only screen and (max-width:1024px){

body {
    background-color:yellow;
}
.box {
     background-color:green;//change background
     height:350px; //resize height
     width:350px;} 
}


@media only screen and (max-width:768px){
body {
    background-color:yellow;
}
.box {
     background-color:green;//change background
     height:300px; //resize height
     width:300px;} 
}


@media only screen and (max-width:479px){

body {background-color:blue;}
.box {
    background-color:pink;//change background
    height:200px; //resize the height here
    width:200px;
}
}

<body>
<h1>RESIZE ME</h1>
  <div class="mygridboxes">
   <div class="box">A</div>
   <div class="box">B</div>
   <div class="box">C</div>
   <div class="box">D</div> 
</div>
</body>

在视口中 DIV 时更改 CSS 背景颜色

Change CSS background color when DIV in viewport

html

javascript

css

background-color