滚动顶部导航栏

Question

我试图创建一个导航条，当我向下滚动但当我放置position：fixed时，它是粘性的 在文字上，这样它们也会向下滚动，使它们重叠。 我不想使用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;
}

Answer 1

您正在寻找这种人吗？

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

Answer 2

您的代码有很多问题。 一方面，您的<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/ 。

滚动顶部导航栏

问题描述

2 个解决方案

解决方案1
0 已采纳 2014-02-22 16:05:07

解决方案2
0 2014-02-22 16:16:47

滚动顶部导航栏

问题描述

2 个解决方案

解决方案1 0 已采纳 2014-02-22 16:05:07

解决方案2 0 2014-02-22 16:16:47

解决方案1
0 已采纳 2014-02-22 16:05:07

解决方案2
0 2014-02-22 16:16:47