CODEWITHSUNDEEP
jqueryhtmlcsswordpresssticky-footer
LukePatrick
LukePatrick

Reputation: 39

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.

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/

Upvotes: 1

Views: 2033

Answers (2)

THE AMAZING
THE AMAZING

Reputation: 1593

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.

Upvotes: 0

Joe
Joe

Reputation: 15528

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/

Upvotes: 2

Related Questions