顶部导航栏不能粘到页面顶部

我把我的顶部导航栏固定在顶部，这样当我向下滚动时它就不会消失。但是，现在我希望导航不被修复，以便在向下滚动时它将消失并随内容一起流动。尝试实现这一点时遇到问题。顶部导航栏不能粘到页面顶部

有什么可以帮助我吗？

这是导航

<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这工作的HTML：

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

来源

2016-02-25 alan smith

.topBar =>.topBarSymbols - 您在CSS中输入了错别字

也position:fixed;有只完成了顶部容器，而不是所有的子元素

编辑：我不知道你编辑或它是原来的规定

现在我想导航不被固定

在这种情况下，你需要到处删除position:fixed，或设置为relative或static，这是默认设置。

来源

2016-02-25 14:02:05 Farside

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

来源

2016-02-25 14:05:38

@dippas，它似乎正是作者想要去除固定位置（或他编着的问题）。他说：“现在我想让导航不被修复”... – Farside

顶部导航栏不能粘到页面顶部

回答

相关问题