在HTML页面上固定导航栏（CSS / HTML）

Question

在HTML页面上固定导航栏（CSS / HTML）

htmlcss

3

我正在尝试学习CSS3和HTML5，但有些地方还是有点困惑。目前，我想创建一个页面，其中导航栏固定在页面顶部，并随页面滚动。

实际上，导航栏已经固定在页面顶部并随页面滚动，但内容从页面顶部开始，换句话说，内容在导航栏的后面，我不想要这个效果。

请看下面期望的设计：

当前的设计：

以下是我的CSS代码：

body{
    left: 0;
    top: 0;
    margin: 0px;
    padding: 0px;
}

header.topbar{
    background-color: #f8f6f6;
    position: fixed;
    width: 100%;
    height: 100px;
    opacity: 0.7;
    z-index: 1;
    top: 0;
    left: 0;
}

#content{
    z-index: 0;
    position: absolute;
}

我的HTML代码：

<!DOCTYPE HTML>
<html>
<head>
    <title> Test </title>
    <meta name="description" content="página de teste.">
    <link rel="stylesheet" type="text/css" href="stylesheet/style.css"/>
</head>
<body>

        <header class="topbar">
            test
        </header>

        <p>another test</p><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/>
        <p>again</p>

</body>

那么，我该怎么解决我的问题呢？请尝试使用CSS来回答，我目前不想学习JavaScript / jQuery。

谢谢！

- Paladini

请查看此链接：http://www.fuelyourcreativity.com/how-to-create-a-fixed-navigation-bar-for-your-website/ - user2543022

这个够好吗？- http://jsfiddle.net/GjMbx/ - Elen

5个回答

1

你需要使用的是 position: fixed;。

/* Tell body leave a 40px gap at the top for the navigation when the page is scrolled to the top */
body { position: relative; padding-top: 40px; }
/* Tell the nav to stick to the top left */
nav { position: fixed; top: 0; left: 0; }

http://jsfiddle.net/ninty9notout/8J7UM/

- ninty9notout

1

将您的内容用一个div包裹起来，并在顶部添加100像素的内边距（标题栏的高度）。

根据我的结构。

.bodyPan{
    padding-top:100px;
}

正在工作的 jsFiddle 文件

- Roy Sonasish

1

具有 "固定" 或 "绝对" 位置的元素不占用页面空间，因此您可以通过向内容添加边距或填充来解决问题：

<article id='content'>
    <p>another test</p><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/>        <br/><br/><br/><br/><br/><br/><br/>
    <p>again</p>
<article>


#content{
    margin-top: 100px;
}

http://jsfiddle.net/KUpnA/

- Eduardo Wada

1

给你的内容留出边距。边距值应该是你的页眉（固定页眉）的高度加上20像素。

- Vikas Singhal

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Danield · Accepted Answer

给你的内容添加上边距。头部是固定的，所以不会影响文档的流程。

同时请注意，你的头部设置了不透明度，导致滚动时略微看到内容。

如果这不是你想要的，请将其移除。（就像这样） FIDDLE

#content{
    margin-top: 100px;
    z-index: 0;
    position: absolute;
}