Sticky Footer Always at Bottom of Screen (Not Webpage)

Question

Im using Chris Coyier's Sticky Footer example to add a footer to my webpage. It works great!

However, I am wondering how I can adjust the code so the footer sits at the bottom of the screen -- not the webpage.

So for example when it first loads rests at the footer of my screen - but when I begin to scroll down it adjusts itself and locks itself down at the bottom of the page.

How can I keep it at the bottom of my screen?

Ive tried tweaking the last 2 lines of the emample:

 $(window)
               .scroll(positionFooter)
               .resize(positionFooter)

But not getting too far...

I guess I am confused by what you mean - the sticky footer is usually meant for pages in which you can't scroll but you want something to fit at the bottom of the window - are you looking for something like this http://jsfiddle.net/8YWHn/ — James Daly, Oct 11 '13 at 04:10
@JamesDaly That is exactly what I was looking for! Please put your css and js -- or just this jfiddle -- in an answer so that I can accept it. The css .fixed and edited else statement in js did it. Thank you! — Chris, Oct 11 '13 at 04:26

score 1 · Accepted Answer · answered Oct 11 '13 at 04:30

hope this works for you http://jsfiddle.net/8YWHn/

the css

.fixed {
  position:fixed;
    bottom:0px;
    -webkit-backface-visibility:hidden;  

}

the js

 var footerHeight = 0,
               footerTop = 0,
               $footer = $("footer");

           positionFooter();

           function positionFooter() {

                    footerHeight = $footer.height();
                    footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";

                   if ( ($(document.body).height()+footerHeight) < $(window).height()) {
                       $footer.css({
                            position: "absolute"
                       }).animate({
                            top: footerTop
                       })
                   } else {
                       $footer.addClass('fixed');
                   }

           }

           $(window)
                   .scroll(positionFooter)
                   .resize(positionFooter)

score 0 · Answer 2 · answered Oct 11 '13 at 04:49

0

Another way to do this that works for me is simply replace the line in the javascript:

 position: "static"

with:

 position: "fixed"

answered Oct 11 '13 at 04:49

Chris

18,075
15
59
77

Sticky Footer Always at Bottom of Screen (Not Webpage)

2 Answers2