javascript - Add class on scroll -

i have fixed black filled svg logo in header want fill white when scrolls on dark full width container div further down page. how html structured:

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

i'm trying add .logo__white when scrolls on specific divs. sort of how logo works here http://www.dtelepathy.com/philosophy/

if understand right u want add class div when scroll/page position on same point start of div. can jquery.

$(window).scroll(function (event) { // when page being scrolled     var scroll = $(window).scrolltop(); // define current scroll height     var divheight = $('.div-name').height(); // define position (height) of div      if (scroll > divheight) { // if current scroll higher div height         $('.div-name').addclass('class-name'); // add class name     } }); 

e: make sure include jquery in project