Question

我的顶部导航栏固定在顶部，以便在我向下滚动时它永远不会消失。但是，现在我希望导航不被修复，这样当我向下滚动时它将消失并随内容一起流动。我在努力实现这一目标时遇到了麻烦。

请帮帮我吗？

这是导航的html

header

固定的旧CSS工作：

  <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%;
}

Answer 1

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

Answer 2

consume =＆gt; .topBar - 你在CSS中得到了拼写错误

.topBarSymbols也必须仅对顶级容器进行，而不是对所有子元素进行

编辑：我不确定你是否编辑过，或者这是原始要求

现在我希望修复导航 NOT

在这种情况下，您需要删除所有地方position:fixed;，或设置为position:fixed或relative，这是默认设置。

顶部导航栏不会粘在页面顶部

2 个答案: