3

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

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

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

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

我们发现这个特定问题只出现在少数页面上，当页面有一些内容，如图像、视频或 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 评论。

4

7 回答 7

2

这看起来怎么样？

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

于 2012-05-08T16:36:24.823 回答
1

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

于 2012-05-02T22:48:45.150 回答
0

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

于 2012-05-09T04:25:55.037 回答
0

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

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

希望有帮助。

于 2012-05-02T15:42:46.190 回答
0

这不是答案，但我在检查您的网站时发现了一些东西...这是您的实际 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; ">

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

于 2012-04-28T06:50:06.013 回答
0

最后通过两种技术解决了这个问题，尽可能使用 CSS 设置显式高度，并在加载所有图像后延迟 jQuery 函数。参考这个：延迟一些jQuery函数，直到所有图像都完全加载

于 2012-06-12T07:59:51.247 回答
0

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

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

于 2012-05-04T08:16:07.437 回答