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

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)因为在resize展开/折叠div时,不会在FF中触发事件.