动态内容加载时向下移动的粘性页脚

所以当文档高度高于窗口高度时,您不想再完全定位页脚了?然后添加一个 else

if($(document.body).height() < $(window).height()){
    $('#footer').css({
        position: 'absolute',
        top:  ( $(window).scrollTop() + $(window).height()
              - $("#footer").height() ) + "px",
        width: "100%"
    });
} else {
    $('#footer').css({
        position: 'static'
    });
}   

这里有一个 live demo . 注意,我添加了 click 事件到 $(window) 因为 resize 展开/折叠div时不会在FF中触发。

http://www.cssstickyfooter.com/

我知道我来晚了,但是我最近在AJAX评论和post/portfolio标签过滤器上遇到了类似的问题。谷歌把我带到了这里,这个公认的答案启发了我下面的第一个例子。

我将我的粘性页脚逻辑设置为激发文档就绪和窗口大小调整:

$(document).ready(function() {
  stickyFooter();
});
$(window).on('resize', function() {
  stickyFooter();
});

function dynamicFunctionOne() {
  /* DOM-height-modifying logic here */

  $(window).trigger('resize');
}

dynamicFunctionOne();

在另一个例子中,我调用我的sticky footer函数作为另一个DOM高度修改函数的回调。

function dynamicFunctionTwo(callback) {
  /* DOM-height-modifying logic here */

  callback();
}

dynamicFunctionTwo(stickyFooter);

无论是哪种实现,都不需要在每次单击时侦听事件来设置粘性页脚的位置。