1

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/

4

2 回答 2

2

设置值时忘记考虑 8pxborder-top样式。top改变：

footerHeight = $footer.height();

至

footerHeight = $footer.outerHeight();

在jquery.footerstick.js文件的第 14 行。

这使用 jQuery.outerHeight()而不是.height().

它在这里工作：http: //jsfiddle.net/ZxupR/2/

于 2013-08-23T00:42:46.313 回答
0

我在 crome 中以 Web 开发人员模式打开了您的网站，您的页脚似乎处于绝对位置。每次滚动时都有一个增量位置。检查那个。以及仅在达到某个窗口分辨率时才发生的代码。

于 2013-08-23T01:22:59.673 回答