narcis Posted November 24, 2012 Report Share Posted November 24, 2012 (edited) 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 Quote Link to comment Share on other sites More sharing options...
kcmastrpc Posted December 9, 2012 Report Share Posted December 9, 2012 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). Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.