固定 div 滚动停止后

Question

我正在制作固定在页面右侧的菜单。我正在使用一些 JavaScript 将菜单保持在固定位置，直到站点到达特定位置（距顶部 243 像素 - 这清除了我的 header）。所有这些都按我的预期工作......但我正在寻找一种方法让菜单停止从底部滚动到特定数量的像素（清除我的页脚 - 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，所以它不是预期的运行。

您可以更改显示或隐藏方式，这由您决定。我想对您的用户对菜单消失的恼怒程度发表一些评论，但这取决于您的决定。或者，您可以使用这些触发器 "refix" 您的菜单。世界尽在掌握等

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

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

固定 div 滚动停止后

Fixed div scroll stop after

javascript

css

scroll

menu

fixed