Question

我一直在使用jQuery的this snippet获得一个粘性页脚：

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

然而，当我有可扩展/可折叠的div位于原始内容不如窗口高的地方时会中断，因为它会粘在窗口的底部，而不是文档的底部。 / p>

有没有办法解决这个问题，或者更好的方法呢？

请记住，我对HTML没有太多控制权，因为我需要在Django的管理界面中执行此操作，这不允许在您可能想要完成此类操作的位置注入大量HTML事物（即this answer和this answer对我不起作用）。

Answer 1

因此，当文档高度高于窗口高度时，您不想再完全放置页脚了吗？然后添加一个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)，因为展开/折叠div时，resize不会在FF中触发。

Answer 2

我使用这种方法来处理粘性页脚和动态内容（但我的应用程序的集成比示例稍微复杂一点）并且它有效：http://www.cssstickyfooter.com/

Answer 3

我知道我已经迟到了，但是最近我的AJAX评论和帖子/投资组合标签过滤器遇到了类似的问题。谷歌带领我来到这里，接受的答案激发了我的第一个例子。

我设置了粘性页脚逻辑，以便为文档就绪和窗口调整大小启动：

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

对于我的动态内容，我只需在DOM高度修改功能中触发调整大小，例如：

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

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

dynamicFunctionOne();

在另一种情况下，我将我的粘性页脚函数称为另一个DOM高度修改函数的回调。

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

  callback();
}

dynamicFunctionTwo(stickyFooter);

无论是哪种实现，都不需要在设置粘性页脚位置的每次点击中监听事件。

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

3 个答案: