Как при скроле страницы поменять цвет хедера?

Question

[Greeg Zagrelov]

Как на чистом JS сделать смену цвета хедера при скроле страницы ?

Comments

[WapSter]

очевидно использовать необходимое событие

Answer 1

[eugenedrvnk]

Если вам нужно что бы после преодоления определённой отметки, цвет хедера менялся, тогда что-то вроде :

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'
})

А если вам нужно что бы цвет изменялся плавным переходом по мере скролла тогда вероятно вам стоит обратиться к плагину ScrollMagic

Comments

[Greeg Zagrelov]

Спасибо большое

Answer 2

[catherinetr]

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 {
           
        }
    });
}