How to change class after scroll somewhere(few pixels)

It will change class when you scroll down ex. 500px (you are able to change it that pixels) . mostly this method is used in headers like in fixed and sticky headers .

Html codes :

<div class="header">HEADER</div>

CSS Codes :

body{

 height:800px;  

}

.header {

  background-color: red;

  color: black;

  width: 100%;

  height: 20px;

  text-align:center;

  position: fixed;

  top: 0;

  left: 0;

}

.header.change {

  background-color: black;

  color: white;

}

JavaScript codes:

$(window).scroll(function() {

  var scroll = $(window).scrollTop();

  if (scroll >= 500) {

    $(".header").addClass("change");

  } 

 else {

    $(".header").removeClass("change");

  }

});

SEE DEMO HERE https://jsfiddle.net/Webcodingwordpress/b5sgw0ve/