将 DIV 放置在具有可变高度的固定 div 下方

Question

问题来了： 假设我有这样的事情：

<div id="leftcontainer">
    <div id="top" style="position:fixed"></div>
    <div id="below"></div>
</div>

我希望#below div 在#top div 下方，但不要使用margin-top，因为#top div 会有不同的大小。 此外，#below div 的大小可以不同，并且应该在 #top div 下方滚动。

有人知道如何实现这一点吗？ 问候 - 克里斯

Answer 1

我创建了这个 jquery 插件来解决我在有一个中间容器（表格数据）时遇到的类似问题，并且我希望在滚动列表时将标题固定到页面顶部（列表是可变的尺寸）。问题之一是，当标题固定时，它下面的内容会跳到页面上（不好）。此插件补偿了“固定”元素，并允许其下方的内容按应有的位置和滚动。

这里是可以解决这个问题的 jquery 插件的链接：

https://github.com/bigspotteddog/ScrollToFixed

这个插件的描述如下：

此插件用于将元素固定到页面顶部，如果元素会垂直滚动到视图之外；但是，它确实允许元素随着水平滚动继续向左或向右移动。

给定一个选项marginTop，一旦垂直滚动到达目标位置，元素将停止垂直向上移动；但是，当页面向左或向右滚动时，元素仍会水平移动。一旦页面向下滚动超过目标位置，元素将恢复到页面上的原始位置。

此插件已在 Firefox 3/4、Google Chrome 10/11、Safari 5 和 Internet Explorer 8/9 中测试。

用于您的特定情况：

<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery-scrolltofixed-min.js" type="text/javascript"></script>

$(document).ready(function() {
    $('#top').scrollToFixed();
});

Answer 2

这对于 jQuery 来说相当简单如果页面渲染后顶部 div 的高度是固定的。

$(document).ready(function() {
    $('#below').css('top', $('#top').outerHeight());
});

这会将下面元素的 css top 属性分配为等于顶部元素的全高。其他布局因素可能会导致它不是正确的顶部值，在这种情况下，您必须确定识别顶部值的正确方法，但原则是相同的，在简单的情况下，这将无需修改即可工作.

Answer 3

这与@hemp 的答案相同，只是添加了 div 不断更新它的位置，方法是将 jquery-css 放在一个在您调整大小时运行的函数中。

    $(document).ready(function() {
        function SomeFunction() {
            $('#below').css('top', $('#top').outerHeight());
        }
        window.onresize = SomeFunction;
    });