在绝对定位的 div 内需要一个固定定位的 div

Question

我正在使用 Snap.js 插件 -（它允许您创建滚动侧抽屉/面板）。

它通过创建 3 个绝对定位的 div 来工作，其中一个包含主要内容。

当一个 div 本身位于绝对定位的 div 内时，有没有办法将它定位到窗口的顶部。

目前我只是将固定的 div 固定到绝对定位的 div 的顶部，而不是固定到浏览器的顶部。当我滚动时，div 保持固定在主要内容的顶部，而不是窗口。

例如：

<div style="position:absolute;">

    <div style="position:fixed;top:0">
       <!-- some content which needs to be pinned to top of window -->
    </div>

</div>

目前我正在使用 javascript 来跟踪滚动偏移量并手动调整子 div 的顶部位置，这对于性能来说并不理想。

任何帮助表示赞赏！

Answer 1

我做了一个小提琴来展示我的 javascript 解决方法 - 在 Internet Explorer 中滚动时它会抖动，任何想法。

<div id="displayed-content" class="snap-content scrollable">
    <div><!-- regular content --></div>
        <div><!-- fixed content --></div>
    <div><!-- footer content --></div>
</div>

http://jsfiddle.net/bxRVT/

Answer 2

我猜测你正在尝试做什么，但你可能正在寻找这样的东西：

<div class="local-wrap">
    <div class="fixed">
       Some content which needs to be pinned to top of window
    </div>
    <div class="port">
        Regular content...
    </div>
</div>

并应用以下 CSS：

.local-wrap {
    position: relative;
}
.local-wrap .fixed {
    position: absolute;
    top: 0;
    left: 0;
    background-color: lightgray;
    width: 100%;
    height: 5.00em;
}
.local-wrap .port {
    position: relative;
    top: 5.00em;
    min-height: 10em;
    height: 15em;
    overflow: auto;
    border: 1px solid gray;
    border-width: 0 1px 1px 1px;
}

演示小提琴：http://jsfiddle.net/audetwebdesign/pTJbW/

本质上，要获得相对于块元素的固定块，您需要使用绝对定位。固定定位总是相对于根元素或视口，所以position: fixed 帮不了你。

我所做的是定义一个.local-wrap 容器，其中包含两个子块，其中一个是 绝对定位在.local-wrap 的顶部，另一个在常规流中。我使用position: relative 将其置于.fixed 下方，但也可以使用上边距。

我修复了一些高度来演示本地窗口/端口中的滚动内容，但这可以根据您的设计和应用程序进行更改。

免责声明

我不熟悉 snap.js，因此可能需要考虑其他因素。

评论 CSS3 变换和固定元素

根据 CSS3 规范，如果您对元素应用变换，则将其命名为 div.transformed，然后 div.transformed 会创建一个新的堆叠上下文并用作它包含的任何固定位置子元素的包含块，其中这就是为什么在您的场景中，固定位置上下文不会停留在窗口顶部。

参考见Mozilla Developer Network -> CSS Reference -> Transform