css - 导航栏背景仅对正文背景透明

Question

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

标签： css

Answer 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>