如何改变固定的div位置为绝对时，它重叠父div

Question

div's:

<div id="siteContainer">
    <div id="Shadow">
        <div id="Border">
            <div id="Display">
                <div id="NBar"></div>
                <!-- End NBar -->
                <div id="Screen"></div>
                <!-- End Tablet Screen -->
                <div id="MenuBar"></div>
                <!-- End Menu Bar -->
            </div>
            <!-- End Display -->
        </div>
        <!-- End Border -->
    </div>
    <!-- End Shadow -->
</div>

#MenuBar设置的位置固定在屏幕的底部(bottom: 0px)，我想要的是当它到达div #Display的底部时设置绝对位置，这样它就不会再向下移动了

Answer 1

我设法使它按照我想要的方式工作:

$(window).scroll(function (event) {
    if ($(this).scrollTop() >= $("#MenuBar").height().valueOf() * 2) {
        $("#MenuBar").addClass("fixedMenu");
    } else {
        $("#MenuBar").removeClass("fixedMenu");
    }
});

我想知道是否有更好的方法来做这件事。