'Change header background colour when page scrolls on sticky header

i have a sticky transparent header using the following css code on my website www.obviagency.com

CSS CODE:

#site-header-inner {

height:0px;
z-index:170;
margin:0 auto;

width:100%;
position:fixed;
top:0;
margin-top:10px;
}

i would like to change the background color on scroll to white. can someone please help me because nothing i've tried works:/

thank you

csscolorsheadertransparentsticky


Solution 1:[1]

You would have to use JavaScript with a scroll event listener. I used blue as an example so you can see the change and added a transition property to the header so it would transition smoothly.

let header = document.getElementById('site-header-inner');

document.addEventListener('scroll', function() {
  
  // Get the scroll position
  let scrollPos = window.pageYOffset;
  
  if ( scrollPos > 100 ) {
    header.style.backgroundColor = "white";
  } else {
    header.style.backgroundColor = "blue";
  }
  
  
});
#site-header-inner {
  height:50px;
  z-index:170;
  margin:0 auto;
  width:100%;
  position:fixed;
  top:0;
  margin-top:10px;
  background-color: blue;
  transition: all 0.3s;
}

#section {
  height: 1000px;
}
<header id="site-header-inner">

</header>
<section id="section">

</section>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 JayDev95

Related Questions