页面底部固定 div 停在给定位置的问题

我们需要一个位于页面底部的页脚工具栏，并在页面滚动到某个区域下方时粘在该区域上。

我们使用以下脚本实现了这一点：

固定 div 位于页面底部并停止在给定位置 https://stackoverflow.com/questions/5141425/fixed-div-on-bottom-of-page-that-stops-in-given-place

但在某些页面上存在一个问题，即页脚工具栏从页面中消失，然后当页面进一步向下滚动时再次出现。

我们发现此特定问题仅出现在少数页面上，当页面包含图像、视频或 Ajax 等内容时，会在页面加载后填充其他内容（或填充空间）。

我不知道如何解决这个问题。

这是来自具有问题页面的实时站点的链接。

http://www.sandiegopchelp.com/services/cellphone-repair/htc/ http://www.sandiegopchelp.com/services/cellphone-repair/htc/

http://www.sandiegopchelp.com/top-10-tips-to-help-secure-your-computer/ http://www.sandiegopchelp.com/top-10-tips-to-help-secure-your-computer/

http://www.sandiegopchelp.com/notes-on-the-phablet-does-the-world-need-one http://www.sandiegopchelp.com/notes-on-the-phablet-does-the-world-need-one/

它通常在有很多评论的博客文章中更明显。可能是由于 Disqus 评论是在页面完全加载后才加载的。

这看起来怎么样？

http://jsfiddle.net/LukeGT/NxSc3/ http://jsfiddle.net/LukeGT/NxSc3/

$(window).scroll(function() {

    $('#bar').css('position', 'static');
    console.log($('#bar').position().top);
    console.log($(window).scrollTop() + $(window).height());

    if ($(window).scrollTop() + $(window).height() < $('#bar').position().top + $('#bar').height()) {
        $('#bar').css('position', 'fixed');
    }
});

setTimeout(function() {
    $('#extra').show();
}, 1000);​

我通过在 1 秒后显示一些额外的 div 来模拟图像的延迟加载。我认为问题是由于页面的高度在栏代码运行后发生变化，因此如果页面较短（没有图像/ajax 等），它的行为就应该是这样。

我所做的是每次滚动页面时将栏定位在页面底部的位置，从顶部计算其高度，并将其与滚动高度进行比较。如果我们离得太远，它会将栏定位在页面底部的固定位置，否则就不管它。它在 Chrome 中运行顺利，但我没有在其他地方测试过。