CSS在某些点更改背景颜色 [英] CSS Change Background Color at Certain Point

问题描述

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

HTML：

 < div id = ＃block-yui_3_17_2_2_1495044195108_28541class =colorChange> 
 
< script> 
 $ b $（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; 
动画持续时间：1秒; 
动画定时功能：易入功能; 
}} 
 
 @ -webkit-keyframes colorChange {
 0％{
 background-color：black; 
} 
 100.0％{
 background-color：black; 
} 
} 
 
 @keyframes colorChange {
 0％{
 background-color：black; 
} 
 100.0％{
 background-color：black; 
} 
} 
  

解决方案

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

data-console =truedata-babel =false>

body {transition：background-color 0.3s易于进出;} 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坐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坐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坐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坐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坐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坐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为H. < h1>改为黑色< / h1>< / div>

I would like the background of the entire site to change from white to black when a certain element comes into view. So when you scroll by the element the background transitions to black. When you scroll back up I want the background color of the page to change back to white. Thank you!

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

解决方案

Using the scroll event you can calculate the offset of the h1 (or whatever element) which gets the current coordinates of the element. the wScroll variable gets the current vertical position of the scroll bar in this case the top of the window. On the condition you check if the scrollbar is greater or equal to the element you which to target and subtract that from the window height (if you wish to change the background once the element is on the screen change the 1.2 to 1) add a transition to the body for the animation. Check the demo scroll down. Sorry if its not well explained, excuse my writing.

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

这篇关于CSS在某些点更改背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！