滚动时菜单变成纯色？杰士？

Question

您好，我正在尝试让它在您开始向下滚动后，header 逐渐变成纯色，以便您可以在页面下方清楚地看到它。

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

目前我添加了 JS，使 header 在滚动时在社交媒体上向上移动。

这是我目前所拥有的：


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"; 
  
 
  }
}

有没有一种简单的方法可以在此代码中添加更改背景颜色？（对不起，我对 JS 很陌生）

我正在尝试这个：

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

但效果不是很好。

我正在使用 wordpress/Divi 仅供参考。

谢谢！

Answer 1

我查看了您的页面，您只需将这些行添加到您的 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)";
 
  }
}

但是这将不起作用，因为 .et_pb_section_1_tb_header.et_pb_section 选择器将 background-color 属性设置为 !important。您可以添加重要声明，但不建议这样做，最好将其从 CSS class 中删除。请注意，社交媒体 header 会在添加背景色时消失，您可以通过在两个 header.

中添加 z-index 来解决此问题

滚动时菜单变成纯色？杰士？

Menu becomes a solid color upon scrolling? JS?

html

javascript

css

menu

header