透明的NAVBAR无自举https://jsfiddle.net/dtxxxmnt/

Question

我想使Navbar透明，然后在向下滚动时具有不透明度。我知道还有其他类似的问题，但是他们正在使用引导程序。我不使用bootstrap。

编辑：我添加了代码。（标题）

Answer 1

没有代码，我们几乎无能为力。但是，如果您坚持去哪里，我可以为您提供上述Navbar的一般风格，以供您升级或修改：

 .myNavbar{
        background-color: rgba(255,255,255,0.5);
}

您想使用背景颜色透明度，而是使用不透明度用于元素。这花了我半个小时的时间才能完成第一次，因为我很愚蠢，并且正在调整文本颜色，就像在我对纳维尔的不透明度之前一样。

OFC，对于不同的颜色，您需要编辑rgba值。这是他们的意思：

rgba颜色值是用alpha的RGB颜色值的扩展 频道 - 指定颜色的不透明度。

指定了RGBA颜色值：RGBA（红色，绿色，蓝色，alpha）。 alpha参数为0.0（完全透明）和 1.0（完全不透明）。

Answer 2

有一个JavaScript事件，您可以收听卷轴：

https://developer.mozilla.org/en-us/docs/web/events/scroll

调用回调时，您可以将不透明度设置为不同的金额。您还可以添加CSS过渡以使不透明度更改更加顺畅。

滚动事件具有令人讨厌的副作用，也就是说，滚动可能很笨拙。为了防止您可以对其进行审问或节拍。有关此的文章：https：//remysharp.com/2010/07/21/throttling-function-calls

更新了示例。您使用了错误的滚动检查。使用window.pageYOffset。此外，获得Navbar的选择器也无法正常工作。不知道为什么，但是使用QuerySelector，它起作用:)。另外，我将白色背景添加到CSS中，以便在加载页面时将是白色的。

window.onscroll = function() {
  transbar();
};
function transbar() {
  if (window.pageYOffset > 50) {
    document.querySelector("#navbar").style.backgroundColor = "transparent";
  } else {
    document.querySelector("#navbar").style.backgroundColor = "white";
  }
}

.toggle,
[id^=drop] {
  display: none;
}
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  overflow: hidden;
  z-index: 5;
  margin: 0;
  padding: 0;
  color: #ffaa00;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #ffaa00;
  font-weight: bold;
  background-color: white;
}
.navbar:after {
  content: "";
  display: table;
  clear: both;
}
.navbar ul {
  float: right;
  padding: 0;
  margin: 0;
  list-style: none;
}
.navbar ul li {
  margin: 0px;
  display: inline-block;
  float: left;
}
.navbar a {
  display: block;
  padding: 14px 20px;
  font-size: 17px;
  text-decoration: none;
  font-weight: bold;
  color: black;
  transition: 0.5s;
}
.navbar a:hover {
  color: #ffaa00;
  transition: 0.5s;
}
#logo {
  display: block;
  padding: 0 30px;
  float: left;
  font-size: 20px;
  line-height: 60px;
}
#active {
  color: #ffaa00;
}

<header>
  <div class="navbar" id="navbar">
    <nav>
      <div id="logo">Your Logo here</div>
      <label for="drop" class="toggle">&#9776;</label>
      <input type="checkbox" id="drop" />
      <ul class="menu">
        <li><a href="Index.html" id="active">Home</a></li>
        <li><a href="#">Games</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Community</a></li>
        <li><a href="#">About</a></li>
      </ul>
    </nav>
  </div>
</header>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia itaque rem, ea sit quos. Inventore modi sed, provident laborum nobis asperiores repellat esse voluptatum expedita, ea culpa sequi id magnam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia itaque rem, ea sit quos. Inventore modi sed, provident laborum nobis asperiores repellat esse voluptatum expedita, ea culpa sequi id magnam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia itaque rem, ea sit quos. Inventore modi sed, provident laborum nobis asperiores repellat esse voluptatum expedita, ea culpa sequi id magnam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia itaque rem, ea sit quos. Inventore modi sed, provident laborum nobis asperiores repellat esse voluptatum expedita, ea culpa sequi id magnam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia itaque rem, ea sit quos. Inventore modi sed, provident laborum nobis asperiores repellat esse voluptatum expedita, ea culpa sequi id magnam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia itaque rem, ea sit quos. Inventore modi sed, provident laborum nobis asperiores repellat esse voluptatum expedita, ea culpa sequi id magnam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia itaque rem, ea sit quos. Inventore modi sed, provident laborum nobis asperiores repellat esse voluptatum expedita, ea culpa sequi id magnam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia itaque rem, ea sit quos. Inventore modi sed, provident laborum nobis asperiores repellat esse voluptatum expedita, ea culpa sequi id magnam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia itaque rem, ea sit quos. Inventore modi sed, provident laborum nobis asperiores repellat esse voluptatum expedita, ea culpa sequi id magnam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia itaque rem, ea sit quos. Inventore modi sed, provident laborum nobis asperiores repellat esse voluptatum expedita, ea culpa sequi id magnam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia itaque rem, ea sit quos. Inventore modi sed, provident laborum nobis asperiores repellat esse voluptatum expedita, ea culpa sequi id magnam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia itaque rem, ea sit quos. Inventore modi sed, provident laborum nobis asperiores repellat esse voluptatum expedita, ea culpa sequi id magnam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia itaque rem, ea sit quos. Inventore modi sed, provident laborum nobis asperiores repellat esse voluptatum expedita, ea culpa sequi id magnam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia itaque rem, ea sit quos. Inventore modi sed, provident laborum nobis asperiores repellat esse voluptatum expedita, ea culpa sequi id magnam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia itaque rem, ea sit quos. Inventore modi sed, provident laborum nobis asperiores repellat esse voluptatum expedita, ea culpa sequi id magnam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia itaque rem, ea sit quos. Inventore modi sed, provident laborum nobis asperiores repellat esse voluptatum expedita, ea culpa sequi id magnam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia itaque rem, ea sit quos. Inventore modi sed, provident laborum nobis asperiores repellat esse voluptatum expedita, ea culpa sequi id magnam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia itaque rem, ea sit quos. Inventore modi sed, provident laborum nobis asperiores repellat esse voluptatum expedita, ea culpa sequi id magnam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia itaque rem, ea sit quos. Inventore modi sed, provident laborum nobis asperiores repellat esse voluptatum expedita, ea culpa sequi id magnam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia itaque rem, ea sit quos. Inventore modi sed, provident laborum nobis asperiores repellat esse voluptatum expedita, ea culpa sequi id magnam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia itaque rem, ea sit quos. Inventore modi sed, provident laborum nobis asperiores repellat esse voluptatum expedita, ea culpa sequi id magnam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia itaque rem, ea sit quos. Inventore modi sed, provident laborum nobis asperiores repellat esse voluptatum expedita, ea culpa sequi id magnam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia itaque rem, ea sit quos. Inventore modi sed, provident laborum nobis asperiores repellat esse voluptatum expedita, ea culpa sequi id magnam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia itaque rem, ea sit quos. Inventore modi sed, provident laborum nobis asperiores repellat esse voluptatum expedita, ea culpa sequi id magnam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia itaque rem, ea sit quos. Inventore modi sed, provident laborum nobis asperiores repellat esse voluptatum expedita, ea culpa sequi id magnam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia itaque rem, ea sit quos. Inventore modi sed, provident laborum nobis asperiores repellat esse voluptatum expedita, ea culpa sequi id magnam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia itaque rem, ea sit quos. Inventore modi sed, provident laborum nobis asperiores repellat esse voluptatum expedita, ea culpa sequi id magnam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia itaque rem, ea sit quos. Inventore modi sed, provident laborum nobis asperiores repellat esse voluptatum expedita, ea culpa sequi id magnam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia itaque rem, ea sit quos. Inventore modi sed, provident laborum nobis asperiores repellat esse voluptatum expedita, ea culpa sequi id magnam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia itaque rem, ea sit quos. Inventore modi sed, provident laborum nobis asperiores repellat esse voluptatum expedita, ea culpa sequi id magnam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia itaque rem, ea sit quos. Inventore modi sed, provident laborum nobis asperiores repellat esse voluptatum expedita, ea culpa sequi id magnam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia itaque rem, ea sit quos. Inventore modi sed, provident laborum nobis asperiores repellat esse voluptatum expedita, ea culpa sequi id magnam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia itaque rem, ea sit quos. Inventore modi sed, provident laborum nobis asperiores repellat esse voluptatum expedita, ea culpa sequi id magnam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia itaque rem, ea sit quos. Inventore modi sed, provident laborum nobis asperiores repellat esse voluptatum expedita, ea culpa sequi id magnam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia itaque rem, ea sit quos. Inventore modi sed, provident laborum nobis asperiores repellat esse voluptatum expedita, ea culpa sequi id magnam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia itaque rem, ea sit quos. Inventore modi sed, provident laborum nobis asperiores repellat esse voluptatum expedita, ea culpa sequi id magnam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia itaque rem, ea sit quos. Inventore modi sed, provident laborum nobis asperiores repellat esse voluptatum expedita, ea culpa sequi id magnam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia itaque rem, ea sit quos. Inventore modi sed, provident laborum nobis asperiores repellat esse voluptatum expedita, ea culpa sequi id magnam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia itaque rem, ea sit quos. Inventore modi sed, provident laborum nobis asperiores repellat esse voluptatum expedita, ea culpa sequi id magnam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia itaque rem, ea sit quos. Inventore modi sed, provident laborum nobis asperiores repellat esse voluptatum expedita, ea culpa sequi id magnam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia itaque rem, ea sit quos. Inventore modi sed, provident laborum nobis asperiores repellat esse voluptatum expedita, ea culpa sequi id magnam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia itaque rem, ea sit quos. Inventore modi sed, provident laborum nobis asperiores repellat esse voluptatum expedita, ea culpa sequi id magnam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia itaque rem, ea sit quos. Inventore modi sed, provident laborum nobis asperiores repellat esse voluptatum expedita, ea culpa sequi id magnam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia itaque rem, ea sit quos. Inventore modi sed, provident laborum nobis asperiores repellat esse voluptatum expedita, ea culpa sequi id magnam? 
</div>