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

Question

我一直在使用 jQuery 的这个片段来获得粘性页脚：

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 放置在原始内容低于窗口的位置时，这种情况就会中断，因为它会粘在窗口的底部，而不是文档的底部。

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

请记住，我对 HTML 没有太多控制权，因为我需要在 Django 的管理界面中执行此操作，该界面不允许在您可能想要完成此类事情的地方注入太多 HTML（即这个答案和这个答案不起作用为我）。

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'
    });
}   

这是一个现场演示。请注意，我将 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);

无论采用哪种实现方式，都无需在每次单击时监听事件来设置粘性页脚的位置。