我有一个奇怪的问题，固定元素有翻译的 parent ，我会尽可能多地解释它。
我的 JsFiddle 在这里 http://jsfiddle.net/94qaueuL/1/
基本上，当页面滚动到第二个 <section> 时，我应该会出现一个绿色标题。 .我在整个#site-wrap下面还有一些花哨的内容.如果单击 <section> , 它会把 transform:translate(-50%, 0)进入#site-wrap .
问题是，当#site-wrap翻译后，标题有点乱。它不遵循 position:fixed不再。
知道如何解决这个问题吗？
我希望我在这里说得有道理...
编辑 - 哦，滚动时标题脚本应该出现的地方甚至都不重要。当我翻译父级时，它仍然变得一团糟。
最佳答案
问题是因为您正在使用转换引起的。
查看有关 The Transform Rendering Model 的规范
Specifying a value other than ‘none’ for the ‘transform’ property establishes a new local coordinate system at the element that it is applied to.
因此具有固定定位的元素将相对于具有转换的元素 - 而不是视口(viewport)
要解决此问题，我建议使用左/右定位而不是转换。
关于javascript - 使用转换 :translate on parent 时固定元素出现问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28021663/