滚动顶部导航栏

即时通讯尝试创建一个导航栏时，即时滚动下来，但当我把位置固定粘滞：在文字上，所以它们会向下滚动，它们也会重叠。我不想使用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

滚动顶部导航栏

回答

相关问题