Question

过去48小时我一直试图解决这个问题，但实际上我找不到解决方案。我正在使用https://github.com/bigspotteddog/ScrollToFixed插件，我想限制父DIV中的固定位置。我确实在stackoverflow和项目github页面中看到了所有关于scrollToFixed的相关问题，但我没有找到解决此问题的任何线索。

到目前为止，我有：http://jsfiddle.net/CVMjp/1/

这是基本的HTML结构：

<div class="container" id="element_1">
  <div class="content">Content</div>
  <div class="sticky">Sticky</div>
</div>

这将是我的jQuery函数来影响页面上的每个元素：

$(document).ready(function() {
for (i = 1; i <= $('.sticky').length; i++) {

    $('#element_' + i + ' .sticky').scrollToFixed({
        marginTop: 20, 
                  zIndex:1,
                  limit: $('#element_' + (i + 1) + ' .content').offset().top - $('#element_' + i + ' .sticky').height() - 50
    });
}       
});

我希望.sticky框在到达底部时保持在每个.content的底部。现在在我的示例中，当它到达.content DIV的底部时，它会发生变化它的“固定”位置为“绝对”，但是身体边缘存在问题（因为它具有基于身体的“左”位置而不是。内容中的左侧位置）以及我无法找到的其他问题问题的根源。

此外，在jsfiddle示例中， $（document）.ready 没有问题，但在我的在线网站中我不得不使用 $（window）.load 获得每个.content DIV的正确偏移（）。顶部。当我使用document.ready时，显然所有的.content DIV都被视为具有相同的高度，尽管它们不同，因为它们内部的内容量不同。

如果我可以解决这个问题，我会更新这个问题，但我可以使用一些帮助。

提前致谢！：）

Answer 1

你需要一点点不同的方法。

首先.sticky应该在容器中。然后使用display: table和display: table-cell制作布局表格。 table-layout: fixed会帮助您保持.sidebar和.content的高度相同。这是fiddle，先生。

但是有限制。例如，您只能在身体标记上使用position: relative。

关于offset().top问题，您可以使用waitForImages插件并仅将其应用于.content。但不知道更好的解决方案。

多个DIV中的jquery scrollToFixed限制

1 个答案: