Javascript 滚动堆叠菜单

假设我在页面顶部的滚动条后面有一个固定的导航div。我还希望第二个菜单div在向下滚动时与第一个div发生冲突时堆叠。 更准确地说，第二个菜单保持正常的流程，直到向下滚动时与固定菜单发生冲突，然后我希望第二个div在剩下的滚动过程中保持固定，如图所示

我该怎么做

---

谢谢

您可以使用简单的jquery来实现这一点。试试这个演示

你的头球在这里。。。
这是左列
这是右栏
html，正文{
保证金：0；
填充：0；
}
身体{
填充顶部：50px；
}
.标题{
位置：固定；
排名：0；
宽度：100%；
填充：10px0；
高度：30px；
文本对齐：居中；
背景#f4；
}
.主要内容{
保证金：50px自动0；
宽度：500px；
溢出：隐藏；
}
.lftCol{
浮动：左；
右边距：20px；
宽度：80px；
高度：100px；
文本对齐：居中；
颜色：#fff；
}
.lftColContent{
宽度：80px；
背景：红色；
}
.rhtCol{
浮动：左；
宽度：400px；
高度：500px；
文本对齐：居中；
颜色：#fff；
背景：蓝色；
}
var hdrHeight=$（“.header”）.outerHeight（）；
var mainCnt=$（“.mainContent”）；
变量lftSticky=$（“.lftColContent”）；
$（函数（）{
$（窗口）。滚动（函数（）{
如果（$（this.scrollTop（）>hdrHeight）{
lftSticky.css({
“位置”：“固定”，
“顶部”：hdrHeight
});
返回false；
}
否则{
lftSticky.css({
“位置”：“静态”，
“顶部”：0
});
返回false；
}
});
});

有一个jQuery插件，您可能需要研究它：

它甚至可以让您为冲突检测菜单定制一种新样式。很好！谢谢！

<header class="header">
    your header goes here...
</header>
<section class="mainContent">
    <div class="lftCol">
        <div class="lftColContent">This is Left column</div>
    </div>
    <div class="rhtCol">
        This is Right column
    </div>
</section>

html, body{
    margin: 0;
    padding: 0;
}
body{
    padding-top: 50px;
}
.header{
    position: fixed;
    top: 0;
    width: 100%;
    padding: 10px 0;
    height: 30px;
    text-align: center;
    background: #f4f4f4;
}
.mainContent{
    margin: 50px auto 0;
    width: 500px;
    overflow: hidden;
}
.lftCol{
    float: left;
    margin-right: 20px;
    width: 80px;
    height: 100px;
    text-align: center;
    color: #fff;
}
.lftColContent{
     width: 80px;
     background: red;
}
.rhtCol{
    float: left;
    width: 400px;
    height: 500px;
    text-align: center;
    color: #fff;
    background: blue;
}

var hdrHeight = $(".header").outerHeight();
var mainCnt = $(".mainContent");
var lftSticky = $(".lftColContent");

$(function () {
    $(window).scroll(function () {
        if ($(this).scrollTop() > hdrHeight) {        
            lftSticky.css({
                "position":"fixed",
                "top": hdrHeight
            });
            return false;
        }
        else {
            lftSticky.css({
                "position":"static",
                "top": 0
            });
            return false;
        }
    });
});