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

Question

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

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

fixed div on bottom of page that stops in given place

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

我们发现这个特定问题只出现在少数页面上，当页面有一些内容，如图像、视频或 Ajax 加载页面加载后填充内容(或填充空间)的其他内容时。

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

这是带有问题页面的实时站点的链接。

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

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/

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

Answer 1

这看起来怎么样？

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 中运行流畅，但我还没有在其他地方测试过。