Footer At The Bottom

[narcis]

I want to keep the footer at the bottom of the page when the window is higher than the content. But I want the footer be hidden and below the content when the window is smaller than the content. I know this can be done with css but, for different reasons, I need to use absolute positioning.

 

This is an example of the effect with css: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

 

I have my example with absolute positioning here playing: http://jsbin.com/alebik/1/edit

I attached the file too.

 

It works only when the window loads. But it seems that the resize function does not work?

 

$(function(){

 

// initial position

var footerTop = $('#footer').offset().top;

if(footerTop >= 420){ //400 is the hight of the content

$('#footer').css({position: 'absolute',bottom:'10px'});

}else{

$('#footer').css({position: 'absolute',top:'410px'});

}

 

// when resize

$(window).resize(function() {

var footerTop = $('#footer').offset().top;

if(footerTop >= 420){ //400 is the hight of the content

$('#footer').css({position: 'absolute',bottom:'10px'});

}else{

$('#footer').css({position: 'absolute',top:'410px'});

}

});

})

3.2.html

Edited November 24, 2012 by narcis

[kcmastrpc]

The problem with your JS is that once the footer hits the threshold to move it to the top then it'll never again move outside of the threshold (it's stuck there, forever).

 

Instead of trying to rewrite this code, I'm going to suggest that this can be done purely with CSS. I believe I have the jfiddle I pulled this idea from on my MBP at home (and I will repost it when I find it). But here's the site I deployed with (I believe) what you're looking for. Check out jonah-mason.com. I used some weird hybrid of negative margins to pull it off (you're to need to either put a monitor in portrait or find a 4k display to see how this works when you pull the window past its content threshold).