检测时位置：固定；元素跨越另一个元素答案

【问题标题】：Detect when a position: fixed; element crosses over another element检测时位置：固定；元素跨越另一个元素
【发布时间】：2014-06-06 06:42:23
【问题描述】：

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

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

【问题讨论】：

你不能总是为页脚留出空间吗？固定元素是否应该定位在top: 0; bottom: 0（=100% 高度）？什么是固定元素（广告横幅、侧边栏菜单……）？（XY-问题）

标签： javascript jquery css

【解决方案1】：

$(window).scroll(function () {
    if ($(".fixedposition").offset().top < ($(".footer").offset().top - 30)) {
        $(".fixedposition").css("top", "30px");
        $(".fixedposition").css("display", "block");
    } else {
        $(".fixedposition").css("display", "none");
    }
});

在此处查看小提琴：http://jsfiddle.net/flish/T6x4R/

当然，除了为您的固定 div 设置 display:none; 之外，您可能还应该做点别的事情

【讨论】：