Javascript 创建多个浮动菜单

我的布局如下：

---

菜单栏：zindex:50-固定（下面的内容在下面滚动）

---

图片：zindex:0-（标题滚动）

---

标题：zindex:1-（在图片上滚动，然后在菜单栏下滚动）

---

菜单栏2:zindex:1-（在图片上滚动，然后在菜单栏下滚动）

---

页面主体：zindex:1（在图片上滚动，然后在菜单栏下滚动）

---

这是它目前的工作方式，但希望得到标题和菜单栏2，滑动正常，但然后停止，成为固定时，标题达到菜单栏

我不认为这是可能的纯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>

.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;}

---

请提供HTML、CSS和您的尝试。您还可以搜索大量教程中的“sticky nav CSS”。您尚未发布任何代码，因此我无法提供反馈-但您正在寻找sticky Header，这是一种非常常见的模式。查看。用一些代码更新了它，将查看sticky nav。在创建多个标题方面没有看到太多内容。航路点似乎有很多这样的扩展，这是最近的，但似乎不能使标题停留