0

在过去的 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 的底部时，它会将其“固定”位置更改为“绝对”，但是正文边距存在问题（因为它具有基于正文的“左侧”位置而不是 .content 中的左侧位置）和其他问题我无法真正找到问题的根源。

此外，在 jsfiddle 示例中， $(document).ready没有问题，但在我的在线站点中，我必须使用$(window).load来获取每个 .content DIV的正确offset().top 。当我使用 document.ready 时，显然所有 .content DIV 都被视为具有相同的高度，尽管它们不同，因为它们内部的内容量不同。

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

提前致谢！:)

4

1 回答 1

1

你需要一点不同的方法。

首先.sticky应该在一个容器中。display: table然后用和制作布局表display: table-cell。table-layout: fixed将帮助您保持两者.sidebar的.content高度相同。这是小提琴，先生。

不过也有限制。例如，您只能position: relative在您的身体标签上使用。

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

于 2013-01-11T14:06:49.010 回答