Добавить класс на прокрутке

Question

У меня есть фиксированный черный логотип svg в моем заголовке, который я хочу заполнить белым, когда он прокручивает над контейнером темной полной ширины далее по странице. Это как структурирован 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 только тогда, когда он прокручивается над конкретными дивами. Как работает логотип здесь 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 в проекте