固定在HTML页面顶部的导航栏（CSS/HTML）

我想学习一些CSS3和HTML5，但我有点困惑与一些事情。现在，我想要在页面顶部创建一个固定导航栏的页面，并与页面一起滚动。固定在HTML页面顶部的导航栏（CSS/HTML）

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

参阅需要设计波纹管： 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。

谢谢！

来源

2013-08-27 Paladini

请参阅此链接http://www.fuelyourcreativity.com/how-to-create-a-fixed-navigation-bar-for-your-website/ – krishna

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

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

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

如果这不是你想要的 - 然后删除它。（like so）

FIDDLE

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

来源

2013-08-27 13:14:20 Danield

谢谢，你是第一个回答我的问题，也是最好的答案，谢谢！对于其他人，谢谢，我赞扬所有好的答案。 – Paladini

你需要使用什么是你的内容有一个div 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-27 13:17:25 ninty9notout

包裹，并给它填充顶部100px的头（高度）

按我的结构

.bodyPan{ 
    padding-top:100px; 
}

working jsFiddle file

来源

2013-08-27 13:17:55

与“固定”或“绝对”的位置不会在页面占据的空间，所以你可能的解决方法是，以保证金或填充添加元素内容：

<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-27 13:26:47