Question

正如标题所说的那样！我创建的粘性页脚插件（在这里得到了所有优秀人员的一些慷慨帮助）运行良好，但它不断创建这种奇怪的infini-scroll效果。

知道这里发生了什么吗？我很难过，虽然我怀疑jQuery中有些东西我知道不足以解决问题。

感谢您提供的任何帮助！

使用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%;
}

这是一个显示问题的小提琴：http://jsfiddle.net/ZxupR/

Answer 1

设置border-top值时，您忘记考虑8px top样式。变化：

footerHeight = $footer.height();

到

footerHeight = $footer.outerHeight();

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

这使用jQuery的.outerHeight()代替.height()。

这里有效：http://jsfiddle.net/ZxupR/2/

Answer 2

我在crome里面的web开发者模式下打开了你的网站，你的页脚看起来绝对是位置。每次滚动时增加位置顶部。检查一下。以及代码仅在达到窗口的特定分辨率时才会发生。

粘性页脚创建无限滚动

2 个答案: