Javascript 根据滚动位置更改css类

我有下面的HTML

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

这实现了仅id为的div滚动移动所需的效果。但是，这可能会使页脚不可见

我想做的是，一旦scroll div的底部到达页脚的底部，将

位置：fixed

更改为

位置：absolute

，然后所有内容都将一起向上滚动显示页脚

---

但我不知道怎么做。我在看，但我有点不知所措。

为此，您将举办“onScroll”活动。并检查滚动div的坐标何时与页脚的坐标匹配。一旦它们匹配，在handler的实现中将位置更改为“绝对”。

类似的操作应该可以解决您的问题。试试这个：

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

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

$（窗口）。滚动（函数（）{
var scrollbooth=$（文档）.height（）-$（窗口）.height（）-$（窗口）.scrollTop（）；
如果（滚动底部
$(window).scroll(function () {
    var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();

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