在絕對定位的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解決方法 - 在互聯網瀏覽器中滾動，任何想法時都會感到緊張。

<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