javascript - Detect when a position: fixed; element crosses over another element

Question

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.

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.

Answer 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");
    }
});

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

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