我希望我的导航栏能够粘贴在页面滚动的顶部

Question

当浏览器滚动到达导航栏时，我希望div 2保持固定在屏幕顶部。我该怎么做？

我目前的风格可能很糟糕，因为我还在谷歌学习，但在这里他们是：

/*main wrapper*/
#main {
width: 90%;
height: auto;
margin-left:auto;
margin-right:auto;
}

/*logo start*/
#logo {
background-color: #e6e6e6;
position: relative;
padding: 2px;
margin: 0px;
border: 3px solid #000000;
border-radius: 25px 25px 0px 0px;
height: 174px;
width: 100%;
}

/*navigation bar start*/
#nav-outer {
position: relative;
width: 100%;
margin-bottom: 40px;
}

#nav-box {
width: auto;
display: inline-block;
position: absolute;
top: -3px;
padding-left: 15px;
background-color: #e6e6e6;
border-left: 3px solid #000000;
border-right: 3px solid #000000;
border-bottom: 3px solid #000000;
border-radius: 0px 0px 15px 15px;
text-align: left;
}

Answer 1

为了一个简单的解决方案，有这个jQuery插件：

http://stickyjs.com

以及它的教程：

http://www.websitecodetutorials.com/code/jquery-plugins/sticky-js-position-fixed-at-certain-point-in-page.php

因为这是一个常见的问题，所以还有一个名为position的新的sticky值，它会完全按照您的意愿执行。如果您对此感兴趣，那么这里有一篇很棒的文章：

http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

Answer 2

好的，然后将位置设置为：

#nav-box {
position: fixed;
..
..