title: Change font color on scroll based on a div
body: <p>I am currently coding a simple MENU button that is fixed in the top right of the screen.</p>
  
  <p>With the text it is normally Black, but I want to be able to change the text to White when it is within a certain Div on a page so it is still visible on the dark background images.</p>
  
  <p>I had set up two .CSS classes and tried to get them to switch on scroll but I cannot figure it out.</p>
  
  <p>Anyone know how I can achieve this result?</p>
  
  <p>HTML</p>
  
  <pre><code>  &lt;div class="NavigationButton menu_white"&gt;
      MENU
    &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.NavigationButton {
   position: fixed;
   top: 5%;
   right: 5%;
   z-index: 99999;
   font-family: neuzeit-grotesk, sans-serif;
   font-weight: 700;
   color: inherit;
  }
  
  .menu_white {
   color: #fff;
  }
  
  .menu_black {
   color: #000;
  }
  </code></pre>
  
  <p>(Not My Site) Example site: <a href="http://flavinsky.com/home/amaio" rel="nofollow noreferrer">http://flavinsky.com/home/amaio</a> </p>
  
  <p>Just without the snap scroll</p>
  
  <p>Thanks</p>