CSS Fixed/Absolute positioned <div>

Question

How do I put a div position: fixed; bottom: 0; until the scroll reaches the footer, then it's position: absolute; bottom: 0; of the content div.

I want the div to always stick to the bottom of the viewport, then stick to the bottom of the content div and not cover up my footer.

Bonus points for compass/sass solution!

Answer 1

In this fiddle (I used yours as a base, forked it though) you can see a working example of what you want, with a supposed footer height of 100px.

Here's the JS needed:

$(window).scroll(function () {
    if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
        $('div#scrolled').css({'bottom' : '100px'});
    } else {
        $('div#scrolled').css({'bottom' : '0px'});
    }
});

It checks, on scroll, if the scroll reached the bottom plus 100 pixels, and if so, it sets the bottom of the fixed element to 100px. The bad point is that it's not progressive, and the fixed element jumps when the footer appears. You cant just remove the 100 in the if statement if you want the footer to pop when the user reaches the absolute bottom: if ($(window).scrollTop() + $(window).height() >= $(document).height()) { ...

UPDATE:

Here is the "progressive" version of the above code.

$(window).scroll(function () {
    if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
        var bottom = 100 - ($(document).height() - ($(window).scrollTop() + $(window).height())) + "px";
        $('div#scrolled').css({'bottom' : bottom});
    } else {
        $('div#scrolled').css({'bottom' : '0px'});
    }
});

Now, instead of changing the bottom to 100px whenever the user scroll is under 101px from the bottom, it calculates the position the fixed element should have depending on the scroll

Hope it helps!