检测时的位置：固定;元素跨越另一个元素 [英] Detect when a position: fixed; element crosses over another element

问题描述

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

I'm wonder if its is possible to to detect when an element with the css property position: fixed; crosses over another element while scrolling. My goal is to prevent a fixed position div from ever crossing over a statically positioned footer across pages of varying height, also the footer height may change when viewed on a smaller screen.

理想情况下，固定/可滚动div将位于距离窗口底部20像素处，然后当用户滚动到页脚时，它将保持位于页脚上方20px。

Ideally the fixed/scrollable div would be positioned say 20px from the bottom of the window, then when a user scrolls to the footer it would stay positioned 20px above the footer.

推荐答案

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

请参阅fiddle here： http://jsfiddle.net/flish/T6x4R/

see fiddle here: http://jsfiddle.net/flish/T6x4R/

当然你应该做一些不是set display：none; 为您的固定div

Of course you should probably do something else other than set display:none; for your fixed div

这篇关于检测时的位置：固定;元素跨越另一个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！