html - 我希望我的导航栏停留在页面滚动的顶部

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

因为这是一个很常见的问题，所以还有一个名为 sticky 的新 CSS position 值，它可以完全满足您的要求。如果您对此感兴趣，那么这里有一篇很棒的文章:

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