How to hover a Fixed element until it reaches some point

Question

I\'ve got a div which I need to be fixed to the bottom of the screen, until it reaches some point after scrolling and stop there and stay. If a user start scrolling back up - ma

Answer 1

Sorry for resurrecting the "dead", but I came across this question with the same question and thought I'd share the solution I came up with. In my case, I have images (#rm_gutter_left and #rm_gutter_right) on either side of a center aligned fix width site and a fluid width header and footer. You could adjust it to only be for one element or use a class, of course.

Hope this helps someone else.

// Height and footer settings
var rm_header_height = 67; // px
var rm_footer_height = 200; // px

// Store so jquery only has to find them once
var rm_gutters = $("#rm_gutter_left, #rm_gutter_right");

// Set initial gutter position
rm_gutters.css("top", rm_header_height + "px");

// Attach to window's scroll event
$(window).scroll(function() {
    st = $(this).scrollTop();
    h = $(document).height() - $(window).height();

    // Is the header still in view?
    if (st < rm_header_height) {
        rm_gutters.css({"top": rm_header_height + "px", "bottom": "auto"});

    // Are neither the footer or header in view?
    } else if (st < h - rm_footer_height) {
        rm_gutters.css({"top": 0, "bottom": "auto"});

    // Is the footer in view?
    } else {
        rm_gutters.css({"top": "auto", "bottom": rm_footer_height + "px"});
    }
});