3

我一直在使用这个 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（即这个答案和这个答案对我不起作用）。

4

3 回答 3

11

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

于 2010-07-09T13:03:26.143 回答
3

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

于 2010-07-14T10:30:52.770 回答
0

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

我将我的粘性页脚逻辑设置为触发文档准备和窗口大小调整：

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

对于我的动态内容，我可以简单地在 DOM-height-modifying 函数中触发调整大小，例如：

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

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

dynamicFunctionOne();

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

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

  callback();
}

dynamicFunctionTwo(stickyFooter);

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

于 2015-09-01T23:07:54.763 回答