Menu becomes a solid color upon scrolling? JS?

Question

Hello I am trying to get it where once you begin to scroll down, the header fades into a solid color so that you can see it clearly down the page.

https://journeysendstudios.com/transformative-medical-landing-page/

Currently I have JS added to make the header move up over the social media upon scroll.

This is what I have so far:

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 150 || document.documentElement.scrollTop > 150) {
    document.getElementById("MenuShrink").style.top = "0px"; 
    
  } else {
    document.getElementById("MenuShrink").style.top = "30px"; 
  
 
  }
}

Is there a simple way to add in the change background color within this code? ( sorry I am very unfamiliar with JS )

I was trying this out:

http://jsfiddle.net/634d6vgq/2/

But it wasn't quite working.

I am using wordpress/Divi just fyi.

Thank you!

Answer 1

I viewed your page and you can simply include those lines in your scrollFunction:

function scrollFunction() {
  if (document.body.scrollTop > 150 || document.documentElement.scrollTop > 150) {
    document.getElementById("MenuShrink").style.top = "0px"; 
    document.getElementById("MenuShrink").style.backgroundColor = "orange";
  } else {
    document.getElementById("MenuShrink").style.top = "30px"; 
    document.getElementById("MenuShrink").style.backgroundColor = "rgba(255, 165, 0, 0)";
 
  }
}

however this will not work because the .et_pb_section_1_tb_header.et_pb_section selector have the background-color attribute set to !important. You can add important statement but that is not recommended it is better to remove it from the CSS class. Note that the social media header will disappear when add the background color, you can fix this by add a z-index in both header.