jQuery 驱动的固定定位 div - 页面滚动在 Firefox 中消失，在 Chrome、IE、Safari 中运行良好答案

【问题标题】：jQuery powered fixed positioned div - on page scroll disappears in Firefox, works fine in Chrome, IE, SafarijQuery 驱动的固定定位 div - 页面滚动在 Firefox 中消失，在 Chrome、IE、Safari 中运行良好
【发布时间】：2012-10-10 16:33:26
【问题描述】：

Here我在右侧边栏底部有一个 div，它应该以这种方式运行：

当您向下滚动页面并且 div 到达浏览器屏幕的顶部时，它的类会发生变化，并且会固定在屏幕顶部，直到您到达 div 的父元素的底部。
一旦 div 的底部到达父元素的底部，它的类就会变回非固定位置。

现在问题来了：

由于某种原因，在 Firefox 中，一旦 div 到达父元素的顶部，它就会消失，而在 Chrome、IE 和 Safari 中它仍然可见。

如何防止 div 在 Firefox 中消失？

您可以在这里找到所有必要的代码：http://bit.ly/S9eJ87。

【问题讨论】：

真的吗？您将我们链接回该页面？有点.ly？伙计……那只是……投票结束。我们是来帮忙的人，我们不是免费工作的开发人员。我不是在挖掘您的标记来查找相关对象。如果您懒得花时间为我们找到它，以便我们可以帮助您解决极其本地化的问题，那么您将获得同样的待遇。
@Ohgodwhy 如果使用 firebug 不是您的强项之一，我可以为您制作一个 jsfiddle。如果你能帮我解决我也不介意付费的问题，请pm了解详情。

标签： javascript jquery html css firefox

【解决方案1】：

发生这种情况是因为 Firefox（我认为某些版本的 IE）没有正确设置高度设置为 100% 的嵌套表的高度。

在 Chrome 上，$('#col12').height() 是 1102。在 Firefox 上，它是 0。

因此，作为一种解决方法，您可以更改此行：

else if ($(this).scrollTop() + $el.height() 
  < $el.parent().offset().top + $el.parent().height())

到：

else if ($(window).scrollTop() + $el.height() 
  < $el.parent().offset().top + ($('.content2').height() - $('#fullsize td:first').height()))

如果你给元素一些更好的 id，你可以替换 td:first 选择器。

基本上发生的事情是这样的：

您的主要内容有一个左列有 1 行，右列有 2 行。
右列的底行应该是最大高度，但不是。
因此，要确定该高度应该是多少，取左列的高度，然后减去右列顶行的高度。

如果不清楚，请告诉我，我会尝试更新我的答案。

mkm

【讨论】：

太棒了！这解决了我长期以来一直在努力解决的问题。你真是个天才先生！