How to change header color on page scroll?

Question

css

How to make header color change on page scroll in pure JS?

Answer 1

If you need to change the color of the header after passing a certain mark, then something like:

document.addEventListener('resize', () => {
  if (window.scrollY > 200 && heder.style.color != 'red') {
    header.style.color = 'red'
  } else if (header.style.color == 'red') header.style.color = 'auto'
})

And if you need the color to change smoothly as you scroll, then you should probably turn to the ScrollMagic plugin.

Answer 2

function nameFunct() {
    var hScroll = 0;
    var hWindow = jQuery(window).height(); 
    
    jQuery(window).scroll(function() {
        hScroll = jQuery(this).scrollTop() + hWindow;
        
        if (jQuery(this).scrollTop() >= 220) {
            
        } else {
           
        }
    });
}