Sticky Footer Creating Infinite Scrolling

Question

Just what the title says! The sticky footer plugin I created (with some generous assistance from all you fine folk here) is working well, but it keeps creating this weird infini-scroll effect.

Any idea what's happening here? I'm stumped, though I suspect there's something in the jQuery I'm not knowledgeable enough about to fix.

Thanks for any assistance you can offer!

Javascript:

jQuery(document).ready(function($){

$(window).bind("load", function() { 

       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 },-1)
               } else {
                   $footer.css({ position: "static"})
               }  
           }

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

    });
});

CSS:

#footer {
    clear: both;
    height: 80px;
    padding: 0 0;
    background: #315B71;
    border-top: 8px solid rgb(29, 71, 93);
    width: 100%;
}

Here's a fiddle showing the problem: http://jsfiddle.net/ZxupR/

Answer 1

You forgot to account for the 8px border-top style when setting the top value. Change:

footerHeight = $footer.height();

to

footerHeight = $footer.outerHeight();

on line 14 in your jquery.footerstick.js file.

This uses jQuery's .outerHeight() instead of .height().

Here it is working: http://jsfiddle.net/ZxupR/2/