change-menu-color-on-scroll.js

<script>

var mainHeader = document.querySelector('header');
var mainHeaderHeight = mainHeader.getBoundingClientRect().height

var addBg = function(){
  mainHeader.classList.add('new-bg');
}

var removeBg = function(){
  mainHeader.classList.remove('new-bg'); 
}

window.addEventListener('scroll', () => {
  if(window.pageYOffset > mainHeaderHeight) {
  requestAnimationFrame(addBg);
} else {
  requestAnimationFrame(removeBg);
}
})

</script>