頂部導航欄不能粘到頁面頂部

我把我的頂部導航欄固定在頂部，這樣當我向下滾動時它就不會消失。但是，現在我希望導航不被修復，以便在向下滾動時它將消失並隨內容一起流動。嘗試實現這一點時遇到問題。頂部導航欄不能粘到頁面頂部

有什麼可以幫助我嗎？

這是導航

<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

頂部導航欄不能粘到頁面頂部

回答

相關問題