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

Question

这是问题：让我说我有这样的事情：

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

我想在#top div下面有#below div，但不要使用margin-top，因为#top div将有不同的大小。此外，＃below div的大小可能不同，应在#top div下滚动。

有没有人知道如何实现这一点？迎接 - 克里斯

Answer 1

如果在页面渲染后顶部div的高度是固定的，那么jQuery相当简单。

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

这将指定下面元素的css top属性等于顶部元素的完整高度。其他布局因素可能导致顶部不正确的值，在这种情况下，您必须确定识别顶部值的正确方法，但主体是相同的，在简单的情况下，这将无需修改。

Answer 2

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

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

Answer 3

我创建了这个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();
});