CSS 在特定点更改背景颜色答案

【问题标题】：CSS Change Background Color at Certain PointCSS 在特定点更改背景颜色
【发布时间】：2017-10-17 09:23:18
【问题描述】：

当某个元素出现时，我希望整个网站的背景从白色变为黑色。因此，当您滚动元素时，背景会变为黑色。当您向上滚动时，我希望页面的背景颜色变回白色。谢谢！

HTML：

<div id="#block-yui_3_17_2_2_1495044195108_28541" class="colorChange">

<script> 

$(window).scroll(function () {

$('#block-yui_3_17_2_2_1495044195108_28541').each(function () {

var topOfWindow = $(window).scrollTop(),

bottomOfWindow = topOfWindow + $(window).height();

var imagePos = $(this).offset().top;

if(imagePos <= bottomOfWindow-100 && imagePos >= topOfWindow-250){

$(this).addClass('colorChange');

}else{

$(this).removeClass('colorChange');

}

});

});

</script>

CSS：

.colorChange{
#siteWrapper {

-webkit-animation-name: colorChange;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-in;

animation-name: colorChange;
animation-duration: 1s;
animation-timing-function: ease-in;
}}

@-webkit-keyframes colorChange {
0%  {
    background-color:black;
}
100.0% {
    background-color:black;
}
}

@keyframes colorChange {
0%  {
    background-color:black;
}
100.0% {
    background-color:black;
}
}

【问题讨论】：

请注意，您的 id 不应包含“#” id="block-yui_3_17_2_2_1495044195108_28541"
我正在使用“如何添加动画”文章中的一些代码，他们列出的步骤表明“#”应该在 id 中。
不应该...
好吧，当我拥有它时，我在那里与其他动画一起工作正常。即使我把它拿出来，我这里的代码也不起作用。所以继续...
如果您能告诉我们什么不起作用或您想知道什么，那就太好了。或者至少创建一个小提琴，我们可以在其中尝试您的代码。

标签： javascript jquery html css

【解决方案1】：

使用滚动事件，您可以计算获取元素当前坐标的 h1（或任何元素）的偏移量。 wScroll 变量获取滚动条的当前垂直位置，在本例中为窗口顶部。在您检查滚动条是否大于或等于您要定位的元素并从窗口高度中减去它的条件下（如果您希望在元素出现在屏幕上后更改背景，请将 1.2 更改为 1）添加过渡动画的身体。检查演示向下滚动。抱歉，如果解释得不好，请原谅我的写作。

$(window).scroll(function(){
  var wScroll = $(this).scrollTop();

if(wScroll >= $('h1').offset().top - ($(window).height() / 1.2 ) ){
  $("body").css("background-color", "black");
}else{
  $("body").css("background-color", "white");
}

});

body{
  transition: background-color 0.3s ease-in-out;
}
p{height: 1000px;}
h1{
height: 400px;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hei">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem reprehenderit, nesciunt maxime incidunt facilis, aliquid vel deserunt, provident voluptatibus magni, nam. Doloribus sint ipsa nihil fuga, ad minima reiciendis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem reprehenderit, nesciunt maxime incidunt facilis, aliquid vel deserunt, provident voluptatibus magni, nam. Doloribus sint ipsa nihil fuga, ad minima reiciendis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem reprehenderit, nesciunt maxime incidunt facilis, aliquid vel deserunt, provident voluptatibus magni, nam. Doloribus sint ipsa nihil fuga, ad minima reiciendis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem reprehenderit, nesciunt maxime incidunt facilis, aliquid vel deserunt, provident voluptatibus magni, nam. Doloribus sint ipsa nihil fuga, ad minima reiciendis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem reprehenderit, nesciunt maxime incidunt facilis, aliquid vel deserunt, provident voluptatibus magni, nam. Doloribus sint ipsa nihil fuga, ad minima reiciendis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem reprehenderit, nesciunt maxime incidunt facilis, aliquid vel deserunt, provident voluptatibus magni, nam. Doloribus sint ipsa nihil fuga, ad minima reiciendis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit autem reprehenderit, nesciunt maxime incidunt facilis, aliquid vel deserunt, provident voluptatibus magni, nam. Doloribus sint ipsa nihil fuga, ad minima reiciendis.   </p>
  <h1>Change to Black</h1>
</div>

【讨论】：

谢谢你这是完美的。
没问题。很高兴它有帮助。

【解决方案2】：

如果您只想在元素在视口中时发生某些事情，您可以找到元素的顶部/底部位置并将其与滚动距离和窗口底部进行比较。

$(window).on('resize scroll',function() {
  var $div = $('div'),
      $body = $('body'),
      st = $(this).scrollTop(),
      wh = $(this).height(),
      wb = st + wh,
      dh = $div.height(),
      dt = $div.offset().top,
      db = dh + dt;
  if (dt < wb && db > st) {
    $body.addClass('color');
  } else {
    $body.removeClass('color');
  }
})

section {
  height: 150vh;
}
div {
  background: black;
  height: 200px;
}
.color {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section></section>
<div></div>
<section></section>

【讨论】：

【解决方案3】：

您的$(window).scroll 是正确的，但我认为您的代码缺少正确的设置来执行您想要的操作。这是我从您的代码中制作的一个工作示例，用于在滚动时看到块 div 时更改背景颜色。

https://codepen.io/Nasir_T/pen/jmvwEP

希望这会有所帮助。

【讨论】：

【解决方案4】：

我认为您的真正问题是您的 CSS 中的第一行无效。看看reference。如果要选择#pageWrapper 内的所有.colorChange，请使用：

#siteWrapper .colorChange {}

同时删除 HTML 中的“#”，如下所示：

<div id="block-yui_3_17_2_2_1495044195108_28541" class="colorChange">

我还建议您对事件进行两次节流，这样您就不会监听每个滚动事件，这可能会大大降低您的系统速度，而是每隔 50 秒左右。看看 ScrollSpy 或一些 jquery throtte 插件。

【讨论】：