HTML/CSS 使页眉和导航粘在页面顶部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16980302/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML/CSS Make header and nav sticky on top of the page
提问by Loric-
Currently working on a web project, I would like to set up a sticky part on my website that could be always available. I tried different things but nothing worked.
目前正在从事一个网络项目，我想在我的网站上设置一个可以始终可用的粘性部分。我尝试了不同的东西，但没有任何效果。
My structure is like below
我的结构如下
<body>
<wrap>
<header></header>
<nav></nav>
<container></container>
</wrap>
<footer></footer>
</body>
If you prefer a scheme, it's this link: http://s21.postimg.org/79tp8wu5z/structure_page.png
如果你更喜欢一个方案，它是这个链接：http: //s21.postimg.org/79tp8wu5z/structure_page.png
So I want to make my header nav and background (which is applied on body background) sticky on top of the page.
所以我想让我的标题导航和背景（应用于正文背景）粘在页面顶部。
I know I need to use the fixed an relative position but nothing works except the background.
我知道我需要使用固定的相对位置，但除了背景外没有任何作用。
Here is my css:
这是我的CSS：
body {
background: url(img/bg.jpg) no-repeat center center;
background-attachment: fixed;
background-position: top;
}
.wrap {
width: 960px;
margin: 0 auto;
}
#header {
height: 121px;
position: relative;
}
#footer {
height: 40px;
background-color: #146992;
position: relative;
}
.container {
position:relative;
}
#menu {
position:relative;
height: 45px;
}
Thanks for your help.
谢谢你的帮助。
回答by Trying Tobemyself
You haven't fixed the position of the navbar.
Try using
你还没有固定nav酒吧的位置。尝试使用
#nav
{
background-color:#262626;
width:100%;
height:50px;
box-shadow: 0px 1px 50px #5E5E5E;
position:fixed;
top:0px;
}
Or you can use Twitter Bootstrapfor startup.
或者您可以使用Twitter Bootstrap进行启动。
回答by husayt
I have myself been looking into this problem. I have seen quite a few solutions and each of them had issues, often involving some magic numbers.
我自己一直在研究这个问题。我见过很多解决方案，每个解决方案都有问题，通常涉及一些神奇的数字。
So using best practices from various sources I came up with a solution:
因此，使用各种来源的最佳实践，我想出了一个解决方案：
The thing i wanted to achieve specifically here was to get the main content to scroll between footer and header inside green area.
我想在这里特别实现的事情是让主要内容在绿色区域内的页脚和页眉之间滚动。
Here is working demo with source code:
这是带有源代码的工作演示：
html, body {
height:100%;
margin:0;
padding:0;
}
header {
height: 4em;
background-color:red;
position:relative;
z-index:1;
}
.content {
background:white;
position:absolute;
top:5em;
bottom:5em;
overflow:auto;
}
.contentinner {
}
.container {
height: 100%;
margin: -4em 0 -2em 0;
background:green;
position:relative;
overflow:auto;
}
footer {
height: 2em;
position:relative;
z-index:1;
background-color:yellow;
}<header>Header Strip</header>
<div class="container">
<div class="content">
<div class="contentinner">
<p>THIS IS WHERE THE CONTENT GOES</p>
<p><a href="http://traceyspencer.blogspot.co.uk/2012/04/css-sticky-header-and-footer-with.html" target="_blank">CLICK HERE for an explanation of this page</a>.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lectus nibh, bibendum sit amet porttitor ut, pretium id lectus. Nulla facilisis erat vel nisi malesuada consequat. Phasellus ac porta enim. Aliquam feugiat, lacus ornare fringilla sodales, neque arcu ultricies lorem, vel rhoncus lacus purus eu est. Proin sodales suscipit elit, ut consectetur erat faucibus a. Integer gravida, odio sed pellentesque cursus, lorem mi gravida nisi, vel consequat leo turpis vel leo. Vestibulum ac purus quam. Donec imperdiet varius mollis. Aliquam adipiscing magna vitae ipsum aliquam blandit. Morbi lectus purus, tempor vitae laoreet eu, sollicitudin sit amet magna.</p>
<p>Donec eu vulputate libero. Praesent justo tortor, lobortis sed eleifend nec, posuere a tellus. Sed at purus vitae diam molestie dictum sed quis dolor. Nam pulvinar mi neque, fermentum vehicula arcu. Aenean fringilla, dui non blandit luctus, ligula leo aliquam justo, ac fermentum felis nisi ut mauris. Duis tristique lacinia molestie. In quam sem, tristique non aliquam id, luctus vitae tellus. Cras a mollis sapien.</p>
<p>Donec vel justo vel sem consectetur tempor nec ut est. Nullam fermentum fringilla ultricies. Donec hendrerit condimentum vestibulum. Nulla bibendum urna congue augue semper vitae ultricies dui egestas. Fusce quis risus nibh, nec sagittis ipsum. Sed metus massa, adipiscing quis pharetra ac, sagittis non tellus. Praesent at dolor a est vehicula porttitor. Aenean nec sodales felis.</p>
<p>Vestibulum ut ornare elit. Quisque nisl sem, scelerisque vitae egestas vel, interdum eget augue. Etiam dapibus pharetra ligula, eget imperdiet mi blandit sit amet. Suspendisse potenti. Cras auctor pulvinar augue nec ultrices. Integer congue cursus est, vitae pulvinar quam mattis ut. Aliquam quis dui tincidunt ipsum tristique vulputate vel vitae mauris. Vivamus facilisis rutrum justo, ac sagittis est dapibus sit amet. Sed tortor libero, congue sed egestas et, tempus in urna. Nunc tellus metus, condimentum sed luctus ut, eleifend ac mi. Praesent et tincidunt justo. Suspendisse facilisis elit nec dui sodales sit amet semper mi elementum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Morbi nec ante at sapien semper varius. Etiam a felis in erat vehicula vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel magna eu enim cursus mollis. Donec orci tellus, feugiat ut vulputate in, congue eu diam. Nulla pulvinar hendrerit elit in ornare. Praesent malesuada facilisis convallis. Vestibulum vel sem vel mauris dapibus tempor nec quis erat. Aenean mattis ultricies mauris et rutrum. Mauris ac justo eros, et semper mi.</p>
<p>Donec eu vulputate libero. Praesent justo tortor, lobortis sed eleifend nec, posuere a tellus. Sed at purus vitae diam molestie dictum sed quis dolor. Nam pulvinar mi neque, fermentum vehicula arcu. Aenean fringilla, dui non blandit luctus, ligula leo aliquam justo, ac fermentum felis nisi ut mauris. Duis tristique lacinia molestie. In quam sem, tristique non aliquam id, luctus vitae tellus. Cras a mollis sapien.</p>
<p>Donec vel justo vel sem consectetur tempor nec ut est. Nullam fermentum fringilla ultricies. Donec hendrerit condimentum vestibulum. Nulla bibendum urna congue augue semper vitae ultricies dui egestas. Fusce quis risus nibh, nec sagittis ipsum. Sed metus massa, adipiscing quis pharetra ac, sagittis non tellus. Praesent at dolor a est vehicula porttitor. Aenean nec sodales felis.</p>
<p>Vestibulum ut ornare elit. Quisque nisl sem, scelerisque vitae egestas vel, interdum eget augue. Etiam dapibus pharetra ligula, eget imperdiet mi blandit sit amet. Suspendisse potenti. Cras auctor pulvinar augue nec ultrices. Integer congue cursus est, vitae pulvinar quam mattis ut. Aliquam quis dui tincidunt ipsum tristique vulputate vel vitae mauris. Vivamus facilisis rutrum justo, ac sagittis est dapibus sit amet. Sed tortor libero, congue sed egestas et, tempus in urna. Nunc tellus metus, condimentum sed luctus ut, eleifend ac mi. Praesent et tincidunt justo. Suspendisse facilisis elit nec dui sodales sit amet semper mi elementum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Morbi nec ante at sapien semper varius. Etiam a felis in erat vehicula vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel magna eu enim cursus mollis. Donec orci tellus, feugiat ut vulputate in, congue eu diam. Nulla pulvinar hendrerit elit in ornare. Praesent malesuada facilisis convallis. Vestibulum vel sem vel mauris dapibus tempor nec quis erat. Aenean mattis ultricies mauris et rutrum. Mauris ac justo eros, et semper mi.</p></div>
</div>
</div>
<footer>This is the footer</footer>回答by Sahib Singh
please don't use position fixed if you create a responsive website. because it creates a problem in Webkit browsers and iPhone & iPad. personally I suggest you to use Page Scrollerthis helps you to Easily and Smooth scroll for Client.
如果您创建响应式网站，请不要使用固定位置。因为它会在 Webkit 浏览器和 iPhone 和 iPad 中产生问题。我个人建议您使用Page Scroller这可以帮助您轻松平滑地滚动客户端。
