javascript - 当固定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");
    }
});

我想知道是否有更好的方法。