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

I want div 2 to stay fixed to the top of the screen when the browser scroll reaches the navigation bar. How would i do this ?

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

My current styles probably suck as im still learning from google but here they are:

我现在的风格可能很糟糕,因为我仍然从谷歌学习,但在这里他们是:

/*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;
}

2 个解决方案

#1

For an easy solution, there is this jQuery plugin:

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

http://stickyjs.com

And a tutorial for it:

还有一个教程:

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

Because this is such a common issue, there is also a new CSS position value called sticky which will do exactly what you want. If you're interested in that then there's a great article about it here:

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

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

#2

Ok, set the position then to:

好的,设置位置然后:

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

#1