当固定div位置与父div重叠时如何将其更改为绝对位置

Question

具有此div：

<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的位置固定在屏幕底部（底部：0px），我要的是在到达div #Display的底部时设置绝对位置，这样它就不会进一步向下移动。

Answer 1

通过以下代码，我设法使其能够正常工作：

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

我想知道是否有更好的方法可以做到这一点。