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下滚动。

有人知道如何实现这一点吗？ Greets - Chris

Answer 1

这很简单，jQuery 如果在页面渲染后顶部div的高度是固定的。

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

这将指定下面元素的css top属性等于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();
});

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

3 个答案: