Question

我正在尝试学习一些CSS3和HTML5，但我对某些事情感到困惑。现在，我想在页面顶部创建一个带有固定导航栏的页面，该页面随页面滚动。

实际上导航栏固定在顶部并随页面滚动，但内容从页面顶部开始，换句话说，内容开始在导航栏后面，我不希望这样。

查看想要的设计： Wanted design

当前设计： Current design

以下是我的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。

谢谢！

Answer 1

为您的内容添加margin-top。标题是固定的 - 因此它不包含在文档流中。

另请注意，您在标题上定义了不透明度 - 这会让您在滚动时略微看到内容。

如果这不是您想要的 - 然后将其删除。（like so）

FIDDLE

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

Answer 2

您需要使用的是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/

Answer 3

用div包装你的内容并给它填充前100px（标题的高度）

根据我的结构

.bodyPan{
    padding-top:100px;
}

working jsFiddle file

Answer 4

具有“固定”或“绝对”位置的元素不占用页面中的空间，因此可能的解决方法是为内容添加边距或填充：

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

Answer 5

为您的内容提供保证金。边距值应该是标题的高度（粘性标题）+ 20px。

Navbar固定在HTML页面的顶部（CSS / HTML）

5 个答案: