Change background color of the navbar on scroll

navColorChange.js

// JQuery
$(function (){
	$(document).scroll(function(){
		var $nav = $(".nav");
		$nav.toggleClass("scrolled", $(this).scrollTop() > $nav.height()); // in the class "scrolled" set a different background color
	});
});

// Vanilla
window.onscroll = function() {
  let top = window.scrollY;
  let navHeight = 100 //set nav height or the number of pixels to scroll before color change
  const nav = document.querySelector("nav"); 
  
  if(top >= navHeight) {
    nav.classList.add("active"); // in the active class set a different color for the navbar
  } else {
    nav.classList.remove("active"); 
  }
}