如何將網站的菜單粘貼到屏幕的頂部

Question

我在我的網站中使用this code作爲此側邊菜單，完全如鏈接中所述。我不知道如何改變它，這樣當你滾動時菜單就會粘在屏幕的頂部。

這是爲了您不必滾動回來再次單擊菜單。

感謝您的幫助！

Answer 1

position: fixed; 
top: 0; 

當您滾動時，您的菜單欄將保持在頂部。

要發佈您發佈的評論。假設您有

<div class="menubar"> menubar</div> 

圍繞您的所有菜單欄，在您的CSS文件中找到該類。並添加我的答案。

Answer 2

當將下面的CSS特性的元素（這是菜單在這種情況下）

position: fixed; 
top: 0; 

，它將保持「固定」在你把它放在頁面或父元素的頂部。

要進一步定位，可以使用right,left和bottom屬性。

更多關於position物業可以找到here。

---

例子：

.menu { 
 
    position: fixed; 
 
    top: 0; 
 
    height: auto; 
 
    width: 50px; 
 
    background-color: red; 
 
}

<div class="menu"> 
 
    <p>Some menu text</p> 
 
    <p>Some menu text</p> 
 
</div> 
 

 
<H1>Some Header text</H1> 
 
<H1>Some Header text</H1> 
 
<H1>Some Header text</H1> 
 
<H1>Some Header text</H1> 
 
<H1>Some Header text</H1> 
 
<H1>Some Header text</H1> 
 
<H1>Some Header text</H1> 
 
<H1>Some Header text</H1> 
 
<H1>Some Header text</H1> 
 
<H1>Some Header text</H1> 
 
<H1>Some Header text</H1> 
 
<H1>Some Header text</H1> 
 
<H1>Some Header text</H1> 
 
<H1>Some Header text</H1> 
 
<H1>Some Header text</H1> 
 
<H1>Some Header text</H1> 
 
<H1>Some Header text</H1> 
 
<H1>Some Header text</H1> 
 
<H1>Some Header text</H1> 
 
<H1>Some Header text</H1> 
 
<H1>Some Header text</H1> 
 
<H1>Some Header text</H1> 
 
<H1>Some Header text</H1> 
 
<H1>Some Header text</H1> 
 
<H1>Some Header text</H1>

Answer 3

嘗試在你的 「CSS」 的菜單欄標籤使用此功能。

position: fixed; 
right: 0; 
top: 0; 

將始終保持您的菜單欄位於頂部。

看看這個鏈接。 http://sixrevisions.com/css/fixed-navigation-bar/