スクロールのクラスを追加する

Question

私はヘッダーに固定された黒い塗りつぶしのsvgロゴを持っています。暗い全幅コンテナdivをスクロールすると白く塗りつぶします。 これは、HTMLの構造化された方法です。

<header class="header"> 
    <a href="> 
     <svg class="logo__container"> 
      <g class="logo"></g> 
     </svg> 
    </a> 
</header> 

.logo__container { 
    width: 200px; 
    height: 150px; 
} 

.logo { 
    color: #000000; 
} 

私は.logo__whiteを言う追加しようとしている場合にのみ、特定のdivの上にスクロールします。ここでのロゴの仕組みの並べ替えhttp://www.dtelepathy.com/philosophy/

Answer 1

私がそれを正しく理解していれば、あなたのスクロール/ページ位置がdivの開始点と同じ位置にあるときにdivをクラスに追加したいと思います。これはjQueryで行うことができます。

$(window).scroll(function (event) { // when the page is being scrolled 
    var scroll = $(window).scrollTop(); // define current scroll height 
    var divHeight = $('.div-name').height(); // define position (height) of the div 

    if (scroll > divHeight) { // if the current scroll is higher than the div height 
     $('.div-name').addClass('class-name'); // add class name 
    } 
}); 

E：プロジェクトでのjQueryを必ず含めてください