如何使窗口向下滾動CSS時導航欄不移動？

在我的網站上，我得到的背景圖像保持始終居中，導航始終保持同一水平位置，因此水平尺寸無關緊要，它始終與我使用的位置相同：如何使窗口向下滾動CSS時導航欄不移動？

#nav { 
    list-style: none; 
    position:fixed; 
    right:50%; 
    margin-right:155px; 
    margin-top:220px; 
}

我的問題是與垂直部分。當窗口垂直較小並且向下滾動時，菜單隨頁面一起移動，我不想那樣做。我想讓它留在那裏的標誌，但使用百分比的「頂部」似乎並沒有工作。我對JavaScript並不是很熟悉，所以如果它不能用CSS，那對我來說會更容易理解！

HEEELP！

這裏是我的例子！

jsfiddle.net

來源

2013-07-24 rafacardosoc

定位看看這是你想要什麼：更換'＃nav'到'auto'領域'right'。 – PiLHA

@PiLHA：正確的位置很好，我想改變的是TOP/BOTTOM位置。我不想讓它滾動頁面！ – rafacardosoc

我沒有看到任何例子，我是我的問題嗎？ ...無論如何，我認爲你需要使用'位置：親戚'接下來通過頂部和右側/左側參數來放置你的div ......還有一些其他的東西，我看到了一個使得懸停風格的jquery，最好使用#nav：hover。 –

更改您的導航類：

#nav { 
    list-style: none; 
    position:absolute; 
    right:50%; 
    margin-right:155px; 
    margin-top:220px; 
}

來源

2013-07-24 19:09:03 fenix

不知道如果我理解正確，但是這是你在找什麼：

#nav { 
    list-style: none; 
    position:fixed; 
    left: 0; 
    top:220px; 
}

和你的提琴：http://jsfiddle.net/wQdVv/16/

Do n請注意，手機上的position:fixed是一個壞主意，因爲支持不好，並且會產生奇怪的/不想要的結果。在移動設備上使用static在代替（有媒體查詢）

來源

2013-07-24 19:44:51 Pevara

這是因爲

position:fixed;

，這意味着你希望你的資產淨值與您的屏幕上移動。

you can read about positions here

，但如果你希望你的資產淨值爲您的標誌旁邊，你應該創建一個div，並把兩者的資產淨值，標誌它。

.header 
 
{ 
 
    background-color:transparent;/* you can write any color you want but in this way it gets hidden */ 
 
    text-align:center; 
 
    position:relative; 
 
    } 
 
#nav 
 
{ 
 
    position:absolute; 
 
    bottom:-15px; 
 
    right:42%; 
 
    display:inline-block; 
 
} 
 
ul 
 
{ 
 
    list-style:none; 
 
}

<html> 
 
    <body> 
 
    <div class="header"><!--div that contain both logo and nav--> 
 
     <img src="logo.png" alt="logo" /><!--logo image--> 
 
     <!--nav codes here--> 
 
     <div id="nav"> 
 
      <ul><li>nav</li></ul> 
 
     </div> 
 
     </div> 
 
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><center><h2><p>As You can see it doesn't move with page scrolling</p></h2></center> 
 
    </body> 
 
    </html>

上面的代碼是一個簡單的例子。

來源

2016-05-23 05:24:15 alireza

的問題是

position: fixed;

在你的CSS

。

fixed表示停留在屏幕的這一部分，即使在滾動時也是如此。將其更改爲：

position: absolute;

並且導航欄將保留在任何位置，即使在滾動時也不會移動。

你可以閱讀更多關於W3 Schools

來源

2017-08-02 08:44:03

如何使窗口向下滾動CSS時導航欄不移動？

回答

相關問題