title: how to change class after scroll somewhere
body: <p>I need my header to change its color after scroll. I know there are a lot of questions with a similar problem on Stackoverflow, but I have tried all the solutions and none work. Can someone help me please?</p>
  
  <p>HTML   </p>
  
  <pre><code>&lt;div class="header"&gt;HEADER&lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.header {
      background-color: red;
      color: black;
      width: 100%;
      height: 80px;
      position: fixed;
      top: 0;
      left: 0;
  }
  .header .change {
      background-color: black;
      color: red;
  }
  </code></pre>
  
  <p>Jquery</p>
  
  <pre><code>$(window).scroll(function() {    
      var scroll = $(window).scrollTop();
  
      if(scroll &gt;= 500) {
          $(".header").addClass(".change");
      } else {
          $(".header").removeClass(".change");
      }
  });
  </code></pre>
  
  <p><a href="https://jsfiddle.net/19bwe33x/" rel="nofollow">JSfiddle</a></p>