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。

谢谢！

4

5 回答 5

7

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

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

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

小提琴

#content{
    margin-top: 100px;
    z-index: 0;
    position: absolute;
}
于 2013-08-27T13:14:20.373 回答
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/

于 2013-08-27T13:17:25.883 回答
1

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

根据我的结构

.bodyPan{
    padding-top:100px;
}

工作jsFiddle文件

于 2013-08-27T13:17:55.230 回答
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/

于 2013-08-27T13:26:47.780 回答
1

为您的内容留出余地。边距值应该是标题的高度（粘性标题）+ 20px。

于 2013-08-28T08:54:38.680 回答