html - 顶部导航栏不要粘在页面顶部

Question

我将顶部导航栏固定在顶部，这样当我向下滚动时它就不会消失。但是，现在我希望导航不固定，这样当我向下滚动时它就会消失并随内容一起流动。我在尝试实现这一目标时遇到了麻烦。

有什么可以帮助我的吗？

这是导航的html

  <header>
        <div class="topBarSymbols">
          <nav class="nav">
            <a href="index.html" id="logoSymbols"> <img src="img/Logo.png" alt="logo"></a>
            <a href="sports.html" id="titleSymbols"> <img src="img/footballWhite.png" alt="football"></a>
            <a href="help.html" id="helpSymbols"> <img src="img/helpLogo.png" alt="help icon"></a>
          </nav>
        </div>
      </header>

有效的固定旧 CSS:

.topBar{
 position:fixed;
  z-index: 2;
   top:0;
   left:0;
   width:100%;
   height:12%;
   background-color:#1735E3;
   color:#ffffff;
}

/* styles position of logo */
.nav #logo img {
  position:fixed;
  height: 9%;
  left:5%;
  top:2%;
}
/* styles position of the title of the page represented as an image */
.nav #title img {
  left:140px;
  position:fixed;
  height: 9%;
  top:2%;
  left:42%;
}

/* styles help icon on top right */
.nav #help img {
  left:78%;
  position:fixed;
  height:9%;
  top:2%;
}

我正在尝试解决的当前 CSS，以便导航不固定

* styles top blue navigation bar */
.topBarSymbols{
  position:relative;
  z-index:2;
  margin:0 auto;
  top:0px;
  width:100%;
  height:12%;
  background-color:#1735E3;
  color:#ffffff;
}
/* styles help icon on top right */
.nav #helpSymbols img {
  display: block;
  left:78%;
  height:9%;
  top:2%;
}
/* styles position of logo */
.nav #logoSymbols img {
  display: block;
  height: 9%;
  left:5%;
  top:2%;
}
/* styles position of the title of the page represented as an image */
.nav #titleSymbols img {
  display: block;
  left:140px;
  height: 9%;
  top:2%;
  left:42%;
}

Answer 1

删除 position: fixed 将允许自然行为