Fix bottom footer only when scrolling down

Question

I would like to set the footer at the bottom of the browser window, but only in a situation where the user is already at the very bottom of the page.

If you noticed on Safari on iOS 8 or OS X Mavericks / Yosemite, when you scroll the page off the page, more content will be displayed to get an elastic return effect. It looks really great when you have a fixed title, it just displays more background above the top of your page, while the title is completely fixed, as in native applications.

But when you have a footer that is not pinned to the bottom, they have to scroll down to see the footer when the user scrolls down and then scrolls that limit, more background color will appear underneath the footer, which looks pretty bad. Therefore, if I can fix the footer when this happens, it will behave exactly like the fixed header always with respect to scrolling off the page.

This is what I want to change - notice that the white above the footer appears after scrolling the end of the page. If the footer is locked at the bottom, this will not happen and spaces will be added above it.

, - , . , , - , , , , , , . , .

JSBin

position:sticky? CSS- JavaScript/jQuery.

Answer 1

...!! !

#footer {
position:fixed;
left:0px;
bottom:0px;
height:30px;
width:100%;
background:#999;
}

/* IE 6 */
* html 

#footer 
{
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}