CSS在特定点更改背景颜色

Question

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

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

Answer 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> 

Answer 2

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

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

希望这可以帮助。

Answer 3

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

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

Answer 4

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

#siteWrapper .colorChange {}

还要像这样删除HTML中的“＃”：

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

我还建议您两次限制事件，以免您不听每一次滚动事件，因为滚动事件可能会显着降低系统速度，但每50秒左右。 看一下ScrollSpy或一些jquery throtte插件。