Question

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

Answer 1

使用Java语言，您可以添加滚动事件监听器，然后检查用户滚动了多远。因此，如果它们滚动到某个点，则使背景透明。否则，将其保留为渐变。

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>

导航栏的背景仅对身体背景透明

1 个答案: