导航栏背景仅对正文背景透明答案

【问题标题】：Background of nav bar transparent only for background of body导航栏背景仅对正文背景透明
【发布时间】：2019-12-19 04:43:42
【问题描述】：

是否可以将导航栏设置为透明以便仅用于背景颜色？例如，我在顶部有一个固定的导航栏，当我向下滚动时，我只希望导航栏具有容器当前背景颜色的颜色，这样如果我向下滚动就看不到文本？（我使用的是渐变色而不是固定颜色...）

【问题讨论】：

是的，这是可能的。
您能详细说明一下吗？我是否需要使用 javascript 来实现这一点，或者我怎样才能知道如何做到这一点？
是的，有可能。如果我理解你的问题是正确的，下面是一个例子。 softway.com

标签： css

【解决方案1】：

使用 Javascript，您可以添加一个滚动事件侦听器，然后检查用户滚动了多远。因此，如果他们滚动超过某个点，则使背景透明。否则，将其保留为渐变。

checkNavBackground = () => {
  var nav = document.getElementsByClassName('navbar')[0]
  
  var threshold = 400

  var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;

  if (scrollTop > threshold){
    nav.style.background= 'transparent'
  } else {
    nav.style.background = 'linear-gradient(to right, red , yellow)'
  }

}

document.addEventListener('scroll', checkNavBackground)

.navbar {
  border: solid 1px black;
  height: 30px;
  width: 100%;
  background: linear-gradient(to right, red , yellow);;
  position: fixed;
  top: 0px;
}
 
 .body{
  width: 100%;
  height: 1000px;
 }

<div class='body'>
<div class='navbar'>
  Here is a div with text
</div>
</div>

【讨论】：