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解决方法 - 在互联网资源管理器中滚动任何想法时都会感到紧张。

<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

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

2 个答案: