程序员经验分享-hwhale

CSS 在某个点改变背景颜色

2024-02-11

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

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

使用滚动事件，您可以计算 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

jQuery

html

css

CSS 在某个点改变背景颜色 的相关文章

随机推荐

热门标签