Sticky Footer Creating Infinite Scrolling

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.

Read More

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/

Related posts

Leave a Reply

2 comments

  1. I opened your website in web developer mode inside crome, your footer seems to be on position absolute. with an increment position top every time you scroll. Check that. As well as the code only happening when a certain resolution of the window is reached.