Javascript 绝对定位div中需要固定定位div

我正在使用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的顶部位置，这对性能来说并不理想

---

感谢您的帮助

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

<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>

演示小提琴：

基本上，要获得相对于块元素的固定块，需要使用绝对定位。固定定位总是相对于根元素或视图端口，因此

position:Fixed

对您没有帮助

我所做的是定义一个

.local wrap

容器，它有两个子块，一个子块是 绝对位于

.local wrap

的顶部，另一个位于规则流中。我使用了

position:relative

将其定位在

下面。固定了
，但顶部的边距也会起作用

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

免责声明

我不熟悉SNAP.JS，所以可能需要考虑其他因素。
对CSS3转换和固定元素的评论

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

如需参考，请参阅
我已经制作了一个小提琴，展示了我的javascript解决方案-在internet explorer中滚动时，它会抖动，任何想法

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



绝对定位的div应用了以下css:translate3d（0px，0px，0px），如果我删除它，固定元素的行为与它应该的一样，并固定在窗口顶部。你知道为什么吗？你的示例代码就是这么做的。（这是您想要的吗？）当您在元素上设置“固定位置”时，它会将其从文档流中移除，并使其相对于视口。你是说snap.js破坏了这个吗？很有趣。这有用吗？我主要使用Firefox21.0，它存在上述问题。你对解决这个问题有什么想法吗？或者我必须修改snap.js的工作方式吗？他们在这里也有一些信息，如果你在这里用id内容将下面的内容添加到div中，问题就会重新出现。不幸的是，这不起作用，因为div需要固定在窗口的顶部，但会随着示例中的.local wrap滚动窗口而滚动。使用固定位置div的常规方法确实有效，但仅当css转换从父绝对位置div中移除时才有效。是否有解决方法？目前，每次滚动窗口时，我都在使用javascript调整浮动div的top css属性-这在某些浏览器上可以正常工作，但在其他浏览器上则不稳定。为了更好地说明这一点，我创建了一个JSFIDLE。使浏览器窗口变小，直到输出中出现滚动条，当您滚动时，固定标题将与内容一起滚动。但是，如果你删除了内容上css中的css转换并进行了更新，你会注意到当你滚动标题时，标题仍然是固定的。如果我理解的话，如果你删除CSS transform属性，那么snap.js将无法工作，而这正是你试图解决的问题。谢谢你一直支持我！是的，这正是我面临的问题。我还做了另一件事，这次展示了我的JS解决方案——看看JS代码——它在mobile safari和internet explorer 8中出现了抖动——有什么想法吗？你在这里做了很多工作。很难说如何最好地提高IE性能。您确实处于CSS3技术的前沿。我的第一个猜测是，这些转换在jQuery.scrollTop中发挥得不好，但要想改进您所做的工作，这本身就是一个完整的项目。我会给你投票支持努力！谢谢，我现在正在使用上面的实现，直到我找到更好的方法。
<div id="displayed-content" class="snap-content scrollable">
    <div><!-- regular content --></div>
        <div><!-- fixed content --></div>
    <div><!-- footer content --></div>
</div>