11

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

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

当 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 的顶部位置，这对于性能来说并不理想。

任何帮助表示赞赏！

4

2 回答 2

2

我做了一个小提琴来展示我的 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/

于 2013-06-10T12:46:54.190 回答
0

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

<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 开发者网络 -> CSS 参考 -> 转换

于 2013-06-10T01:10:00.483 回答