Question

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

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

fixed div on bottom of page that stops in given place

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

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

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

以下是有问题页面的实时网站链接。

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

Answer 2

我想这是$(window).height()函数的问题。检查here。对于所有动态内容，如图像，视频或加载Ajax的内容，高度不会添加到$(window).height()的结果中，除非在HTML或CSS中的某处指定（并且从引用的链接中我看到这只发生在Chrome。你可能想确认一下）。对于这些动态内容，您可以尝试在相应的样式中添加html或height属性中的height属性。

Answer 3

这不是答案，但我在检查您的网站时发现了一些东西...... 当你想要它正常工作时，这就是你的实际HTML ..

<div class="footer-toolbar-container" id="sticky_for_a_while" style="position: fixed; ">

但是当它无效时，Position属性正在从Fixed更改为Relative。

<div class="footer-toolbar-container" id="sticky_for_a_while" style="position: relative; ">

你可以检查你的脚本或在这里发布脚本......

Answer 4

在初始状态下，您的div位于position: relative中，因此其偏移量基于容器元素，而不是页面的总高度。变量stickyOffset是根据相对偏移量设置的，这就是为什么它在滚动时比预期更快地被剪切掉的原因以及为什么它在你的JSFiddle中工作，因为容器有页面（iframe）本身。

在$(document).ready函数中，您需要不仅添加页脚的偏移量，还要在包含元素顶部添加偏移量的其余部分，以便偏移量基于总页数而不是包含div。

希望有所帮助。

Answer 5

通过使用chrome在http://www.sandiegopchelp.com/services/cellphone-repair/htc/上查看您的示例，我可以看到您的页脚在到达“相关链接”部分时消失了。此时，您将页脚的位置设置为“相对”，因此它将在文档的常规流程中替换它，并且其位置实际上位于“相关链接”部分之下，这就是它从屏幕上消失的原因（在“相关”下方）链接“）。

但是你计算了它应该在页面加载时成为相对位置的位置，只有在你添加了“相关链接”部分之后应该重新计算它，因为它改变了页面高度（我知道你之后添加了，我是对的？）。

Answer 6

尝试在粘性div的位置上方添加零高度div，在页面调整大小时将保留在该位置，然后在滚动时检查该位置以确定粘性div应停止的位置。

Answer 7

最后通过两种技术修复它，使用CSS尽可能设置显式高度，并在加载所有图像后延迟jQuery函数。请参阅：Delay some jQuery function until all images are loaded completely

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

7 个答案: