Question

我做了一些研究并且很困惑，因为有人说javascript会成为解决方案。

但是，我在主容器中有一个菜单，位于网页的中间。

我希望能够做的是，我希望菜单只有在与浏览器的顶部联系后才能使用浏览器向下滚动。例如当页面加载时，我希望菜单保持原样（即在网站中间），当用户向下滚动时，菜单仍然保持原样但当菜单与浏览器顶部联系时，它跟随滚动，使用户可以看到网页的最底部。

此刻，当我给它一个位置：固定; ，它一直是浏览器的顶端。

我知道如何用CSS和HTML甚至javascript来做到这一点？非常感激。

这就是我正在使用的：

**HTML:**

<div id="main-container">
 <div id="headbody"></div>
 <div id="menu-midddle"></div> --// this is the menu in the middle of the page \\--
</div>

**CSS:**  

#main-container {
width: 1000px;
height: 2200px;
background-color: #FFFFFF;
margin: 0px auto;
top: 0px;
position:relative;
border-style:solid;
border-width:1px;
border-color:#dfe3ee;
}
#headbody {
width:1000px;
height:45px;
border-style:solid;
border-width:1px;
border-color:#588039;
background-color: #588039;
margin: 0px auto;
position: fixed;
z-index: 2;
top:0;
} 
#menu-middle {
width:1000px;
height:45px;
border-style:solid;
border-width:1px;
border-color:#588039;
background-color: #588039;
margin: 0px auto;
position: fixed;
z-index: 2;
top:0;
} 

#main-container {
width: 1000px;
height: 2200px;
background-color: #FFFFFF;
margin: 0px auto;
top: 0px;
position:relative;
border-style:solid;
border-width:1px;
border-color:#dfe3ee;
}

jsfiddle

Answer 1

你可能想看一下bootstrap affix.js

http://getbootstrap.com/javascript/#affix

您可以在http://getbootstrap.com

的菜单上看到该行为

以下是bootstrap中的affix.js教程：

http://tutsme-webdesign.info/bootstrap-3-affix

固定Div容器Div中的Div只在到达浏览器顶部时向下滚动

1 个答案: