fixed div on bottom of page that stops in given place

Question

I have fixed div on bottom of my page that works well. I wonder if there is some simple way to make it "stop" on some place in page when user srolls down to it. I want it to remain fixed on bottom, until user scrolls down to some defined place on page and than stick it to the page and scroll like the rest of content. Any suggestions?

Answer 1

I made this up for you: http://jsfiddle.net/XCYFG/1/.

$(document).ready(function() {
    window._div1 = $('#div1'); //selector is expensive
    window._window = $(window);
    $(window).scroll(function(e) {
        _div1.css("top",
                  Math.min(_window.height(),
                           window.scrollY + 100)
                  + _window.height() - _div1.height() - 110);
    }).scroll();
});

Answer 2

I tried setting something up on jsfiddle. While I was writing it up, I see that others have posted their alternatives. In case mine helps in any way: http://jsfiddle.net/PnUmM/1/

I set the position to relative in the CSS, calculate where it is on document load to keep the info aside and then set it to fixed.

var sticky_offset;
$(document).ready(function() {

    var original_position_offset = $('#sticky_for_a_while').offset();
    sticky_offset = original_position_offset.top;
    $('#sticky_for_a_while').css('position', 'fixed');


});

$(window).scroll(function () {
    var sticky_height = $('#sticky_for_a_while').outerHeight();
    var where_scroll = $(window).scrollTop();
    var window_height = $(window).height();


    if((where_scroll + window_height) > sticky_offset) {
        $('#sticky_for_a_while').css('position', 'relative');
    }

    if((where_scroll + window_height) < (sticky_offset + sticky_height))  {
        $('#sticky_for_a_while').css('position', 'fixed');
    }

});