目前正在开展一个网络项目，我想在我的网站上设置一个粘性部分 这可能总是可用的。我尝试了不同的东西但没有任何效果。
我的结构如下
<body>
<wrap>
<header></header>
<nav></nav>
<container></container>
</wrap>
<footer></footer>
</body>
如果你更喜欢一个方案，那就是这个链接： http://s21.postimg.org/79tp8wu5z/structure_page.png
所以我想让我的标题导航和背景（在身体背景上应用）粘在页面顶部。
我知道我需要使用固定的相对位置，但除了背景之外什么都不起作用。
这是我的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;
}
感谢您的帮助。
答案 0 :(得分：11)
您尚未修正nav栏的位置。
尝试使用
#nav
{
background-color:#262626;
width:100%;
height:50px;
box-shadow: 0px 1px 50px #5E5E5E;
position:fixed;
top:0px;
}
或者您可以使用Twitter Bootstrap进行启动。
答案 1 :(得分：8)
我自己一直在研究这个问题。我已经看到了很多解决方案，每个解决方案都有问题，通常涉及一些神奇的数字。
因此，使用各种来源的最佳实践，我想出了一个解决方案：
我想要在这里专门实现的是让主要内容在绿色区域内的页脚和标题之间滚动。
这是使用源代码的工作演示：
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>
答案 2 :(得分：0)
如果您创建了一个响应式网站，请不要使用固定的位置。因为它会造成问题 Webkit浏览器和iPhone＆amp; iPad兼容。我个人建议您使用Page Scroller这可以帮助您轻松顺畅地滚动客户端。