javascript - 根据滚动位置更改 css 类

Question

我有以下 HTML

<header class="fixed">...</header>
<div id="content">
    <div id="sidemenu" class="fixed">...</div>
    <div id="scroll">...</div>
</div>
<footer class="fixed">...</footer>

CSS中的各种定位规则和规则

.fixed {
    position: fixed;
}

这实现了仅具有 id 滚动移动的 div 的预期效果。但是，这会使页脚不可见。

我想要做的是，一旦滚动 div 的底部到达页脚的底部，将 position: fixed 更改为 position: absolute 然后一切都会一起向上滚动以显示页脚。

但是我不知道该怎么做。我在看waypoints但我有点不知所措。

Answer 1

这样的事情应该可以解决你的问题。试试这个:

$(window).scroll(function () {
    var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();

    if (scrollBottom <= $("footer").height()) {
        $("footer").css("position", "absolute");
        } 
        else {
            $("footer").css("position", "fixed");
        }
});