滾動頂部導航欄

即時通訊嘗試創建一個導航欄時，即時滾動下來，但當我把位置固定粘滯：在文字上，所以它們會向下滾動，它們也會重疊。我不想使用jquery，因爲我的教授。這樣說。滾動頂部導航欄

<html> 
    <head> <title> My Portfolio </title> 
    <link rel="stylesheet" type = "text/css" 
    href="stylesheet.css"> </head> 
    <body> 
    <ul> 
    <a href="Index.html"> Home </a> 
    <a href="About.html" > ABOUT </a > 
    <a href="Projects.html" >PROJECTS </a > 
    <a href="Resume.html" >RESUME </a > 
    <a href="Gallery.html" > GALLERY </a > 
    <b> </b> 
    </body> 
    </html>

CSS

body{ 
background-position:fixed; 
background-repeat:repeat-x; 
background-color:white; 
font-family:Arial; 
font-size:20px; 
} 

a{ 
color:#1b1b1b; 
TEXT-DECORATION: NONE; 
position:fixed; 
z-index:2; 



} 
b{ 
top:0; 
height:30px; 
width: 100%; 
background:white; 
text-align:left; 
position:fixed; 
z-index:1; 
}

來源

2014-02-22 user3341013

是這樣的你正在尋找？

檢查演示。 http://jsbin.com/tafofesi/1/edit

來源

2014-02-22 16:05:07

你的代碼有很多問題。首先，您的<ul>上沒有結束標籤。有些瀏覽器會爲你添加這些，但你不應該依賴它。其次，<ul></ul>是一個無序列表，這意味着它需要有列表項（<li></li>）。

另一件事是，您將<b>標記視爲元素。默認情況下，<b></b>旨在將加粗的狀態應用於文本。

<ul> 
    <li><a href="#">LINK</a></li> 
    <li><a href="#">LINK</a></li> 
    <li><a href="#">LINK</a></li> 
    <li><b><a href="#">BOLD LINK</a></b></li> 
</ul>

你的主要問題是，你已經應用了position: fixed;你的鏈接，而不是它們的容器。你想要的是每個鏈接相對於另一個鏈接（position: relative;）。將一個容器添加到菜單（<ul>），並固定其位置。該容器內的所有元素應該相對或靜態放置。

在此處查看此示例：http://jsfiddle.net/7LTqQ/。

來源

2014-02-22 16:16:47 printr

滾動頂部導航欄

回答

相關問題