Javascript 当一个位置：固定时检测；元素与另一个元素交叉

我想知道是否有可能检测到一个css属性为position的元素：fixed；滚动时越过另一个元素。我的目标是防止固定位置的div在不同高度的页面上越过静态定位的页脚，并且在较小的屏幕上查看时页脚高度可能会改变

理想情况下，固定/可滚动div的位置应该是距离窗口底部20px，然后当用户滚动到页脚时，它将保持在页脚上方20px的位置。

$（窗口）。滚动（函数（）{
$(window).scroll(function () {
    if ($(".fixedposition").offset().top < ($(".footer").offset().top - 30)) {
        $(".fixedposition").css("top", "30px");
        $(".fixedposition").css("display", "block");
    } else {
        $(".fixedposition").css("display", "none");
    }
});

如果（$（“.fixedposition”）.offset（）.top<（$（“.footer”）.offset（）.top-30））{
$（“.fixedposition”）.css（“顶部”、“30px”）；
$（.fixedposition”）.css（“显示”、“块”）；
}否则{
$（.fixedposition”）.css（“显示”、“无”）；
}
});

请看这里的小提琴：

---

当然，除了设置

display:none

为您的固定div

您不能总是为页脚留出空间吗？固定元件是否应定位在

顶部：0；底部：0

（=100%高度）？什么是固定元素（广告横幅、侧边栏菜单等）？（XY问题）