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/
You forgot to account for the 8px
border-top
style when setting thetop
value. Change:to
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/
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.