在滚动上堆叠菜单

Question

假设我在页面顶部滚动后有一个固定的导航div。我还想要第二个菜单div在与第一个div碰撞时叠加，当向下滚动一点时。 更确切地说，第二个菜单保持正常流程，直到它在向下滚动时与固定的菜单发生碰撞，然后我希望第二个div保持固定在那里以进行其余的滚动，就像在图像中一样。

我该怎么做？

谢谢！

Answer 1

您可能需要查看一个jQuery插件：http://stickyjs.com/

Answer 2

您可以使用简单的jquery。试试这个演示http://jsfiddle.net/amoljawale/8MZe5/2/

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