特定のポイントで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).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 3

あなた$(window).scrollは正しいですが、私はあなたのコードは、あなたが欲しいものを行うための適切なセットアップを欠いだと思います。ここでは、スクロール時にブロックdivが表示されたときの背景の色を変更するためにコードから作成したサンプルを示します。

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

は、この情報がお役に立てば幸いです。

Answer 4

あなたの本当の問題は、あなたのCSSの最初の行が無効であると仮定します。 referenceをご覧ください。

#siteWrapper .colorChange {} 

はまたそうのようなあなたのHTMLに「＃」を削除します：あなたは#pageWrapper使用のすべて.colorChange内部を選択する場合は

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

私はまた、あなたは、2つのように、あなたのイベントを絞る推薦しますあなたはシステムを劇的に遅くする可能性があるすべてのスクロールイベントを聴いてはいけませんが、50秒程度です。 ScrollSpyまたはjquery throtteプラグインをご覧ください。