Html 滚动顶部导航栏_Html_Css

Html 滚动顶部导航栏

html css

Html 滚动顶部导航栏,html,css,Html,Css,我试图创建一个导航栏，当我向下滚动时，它是粘性的，但当我放置位置：固定；在文本上，它们也会向下滚动，因此它们会重叠。我不想使用jquery，因为我的教授这么说 <html> <head> <title> My Portfolio </title> <link rel="stylesheet" type = "text/css" href="stylesheet.css"> </head>

我试图创建一个导航栏，当我向下滚动时，它是粘性的，但当我放置位置：固定；在文本上，它们也会向下滚动，因此它们会重叠。我不想使用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>

这是你想要的吗

查看演示。

您的代码有很多问题。首先，您的

上没有结束标记。有些浏览器会为您添加这些，但您不应该指望它。其次，

是一个无序列表，这意味着它需要有列表项（

）

另一件事是，您将

标记视为一个元素。默认情况下，

意味着对文本应用粗体状态

<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>

你的主要问题是你已经应用了

位置：fixed指向链接，而不是指向其容器。您需要的是每个链接相对于另一个链接进行定位（position:relative；
）。在菜单中添加一个容器（
），并使其位置固定。该容器中的所有元素都应相对或静态放置
请参见此处的示例：
<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>