Scroll Div Until Top Of Footer

i've been looking for this for a couple of days but still no joy! I would like to have a div scroll in a fixed position until it gets to the top of the footer. Here is a fiddle of

Solution 1:

You have to check in the scroll event if the bottom edge of your div is lower than the footer. If it is, place the div at the position of the footer minus the height of the div.

$(function(){
    var container = $('#floating-container');
    var minTop = $('header').outerHeight();
    var maxTop = $('footer').offset().top - container.outerHeight(); 

    $(document).scroll(function() {
        var scrollVal = $(document).scrollTop();

        container.css('top', scrollVal);

        if (scrollVal < minTop) { 
            container.css('top', minTop);
        }

        if (container.offset().top > maxTop ) {
            container.css('top', maxTop );    
        }
    });
});

Fiddle

And, a much shorter variant of the script above:

$(function(){
    var container = $('#floating-container');
    var minTop = $('header').outerHeight();
    var maxTop = $('footer').offset().top - container.outerHeight(); 

    $(document).scroll(function() {
        container.css('top', Math.min( Math.max(minTop, $(document).scrollTop()), maxTop ));
    });
});

Short version fiddle.

Solution 2:

Just read the position of the footers top when you load the page:

http://jsfiddle.net/uk4mC/1/

var footerTop = $('#text-block').position().top;

and then use that as a trigger:

if (scrollVal < footerTop) { }