创建多个浮动菜单

Question

我有以下布局：

MENU BAR：zindex：50 - 固定（滚动下方的内容）

图片：zindex：0 - （HEADER滚动）

HEADER：zindex：1 - （滚动图片，然后在MENU栏下）

MENU BAR 2：zindex：1 - （滚动图片，然后在MENU栏下）

PAGE BODY：zindex：1（滚动图片，然后在MENU栏下）

它目前是如何工作的，但希望得到HEADER和MENU BAR 2，正常向上滑动，然后在标题到达MENU BAR时停止并固定。

我认为在纯粹的CSS中可能会烧坏尝试。

HTML：

<div class="menu_bar"> Links </div>
<div class="picture"> <img src="/xxx/xxx.png"/> </div>
<div class="header"> HOMEPAGE </div>
<div class="menubar2"> Links </div>

CSS：

.menubar {height:30px; width:800px; background:#000; colour:#fff; z-index:50;}
.menubarfixed {position:fixed; height:30px; width:800px; background:#000; colour:#fff; z-index:50;}
.picture {z-index:0; top:0;}
.header  {margin-top:40px; height:30px; width:800px; background:#555; colour:#fff; z-index:1;}
.menubar2 {height:30px; width:800px; background:#000; colour:#fff; z-index:1;}