CSS在某些點更改背景顏色

我希望整個站點的背景在某個元素進入視圖時從白色變爲黑色。因此，當您滾動元素時，背景會轉變爲黑色。當您向後滾動時，我希望頁面的背景顏色變回白色。謝謝！CSS在某些點更改背景顏色

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

來源

2017-05-17 Ryan Deshaies

請注意，您的ID不應包含「＃」id =「block-yui_3_17_2_2_1495044195108_28541」 – Woodrow

我正在使用「如何添加動畫」文章中的一些代碼，並且他們已經佈置的步驟顯示「＃「應該在id中。 –

它不應該...... – Scott

使用它獲取的元素的當前座標的滾動事件時，可以計算出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>

來源

2017-05-17 19:27:26

謝謝你這是完美的。 –

沒問題。很高興它有幫助。 –

如果你只是想在元素中視發生的事情，你可以找到上/元素的底部位置，並比較它的滾動的距離和底部窗口。

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

來源

2017-05-17 19:35:31

你$(window).scroll是正確的，但我覺得你的代碼沒有正確的安裝做你想做什麼。這是我用你的代碼編寫的一個工作示例，當滾動時，塊div進入視圖時，可以更改背景的顏色。

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

希望這會有所幫助。

來源

2017-05-17 19:35:58

我假設你真正的問題是你的CSS中第一行無效。看看reference。如果您想選擇所有.colorChange內的#pageWrapper使用：

#siteWrapper .colorChange {}

同時刪除了「＃」在你的HTML像這樣：

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

我也建議你們兩個油門您的活動，使你不會聽每一個滾動事件，這可能會大大減慢你的系統，但每隔50秒左右。看看ScrollSpy或jquery throtte插件。

來源

2017-05-17 19:36:58

CSS在某些點更改背景顏色

回答

相關問題