javascript - 固定 div 滚动停止后

Question

我正在制作一个固定在页面右侧的菜单。我正在使用一些 JavaScript 将菜单保持在固定位置，直到网站到达特定位置(距顶部 243 像素 - 这会清除我的标题)。所有这一切都按我的预期工作......但我正在寻找一种方法让菜单停止从底部滚动到特定数量的像素(清除我的页脚 - 600px)。

JavaScript 看起来像:

$(window).scroll(function(){
    $("#side").css("top",Math.max(15,243-$(this).scrollTop()));
});

HTML 看起来像:

<div class="menu">
    <div id="side">
        <ul>
            <li>Item1</li>
            <li>Item2</li>
            <li>Item3</li>
        </ul>
    </div>
</div>

CSS 看起来像:

.menu {
    right: 0;
    position: absolute;
    top: 243px;
    width: 250px;
    z-index: 5;
}

#side {
    background: #ace;
    position:fixed;
    width: 250px;
}

JS fiddle :https://jsfiddle.net/050dqcea/
原始解决方案(从顶部滚动):Stopping fixed position scrolling at a certain point?

Answer 1

我想我现在明白了， fiddle 没有加载 jQuery，所以它没有按预期运行。

您可以更改显示或隐藏的方式，这取决于您。我想对您的用户对菜单消失的恼怒程度发表一些评论，但这取决于您的决定。或者，您可以使用这些触发器来“修复”您的菜单。世界是你的牡蛎，等等。

我在这里使用了 $("#side").offset().top。这个想法是检查菜单底部何时滚动到页脚顶部。然后将其恢复，我们检查垂直滚动是否小于页脚顶部的偏移量。

给你一把 fiddle :https://jsfiddle.net/5p90s06n/1/