Jump to content
Stef's Coding Community
Sign in to follow this  
narcis

Footer At The Bottom

Recommended Posts

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 by narcis

Share this post


Link to post
Share on other sites

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).

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...