Code for on scroll background color change for the navigation in JQuery

script.js

  <script> 

  $(document).ready(function(){
      $(window).scroll(function() { // check if scroll event happened
        if ($(document).scrollTop() > 50) { // check if user scrolled more than 50 from top of the browser window
          $('.header').css("background-color", "#fff");//  change background-color to white
         
        } else {
          $('.header').css("background-color", "#000"); // if not, change it back to black
        
        }
      });
    });
</script>