css3 变换恢复位置：固定答案

【问题标题】：css3 transform reverts position: fixedcss3 变换恢复位置：固定
【发布时间】：2016-04-04 21:53:59
【问题描述】：

使用 css3 transform() 时，position: fixed 不适用。我做了一个完整的 jsFiddle 来显示这个问题：http://jsfiddle.net/SR5ka/

首先向下滚动，注意左侧边栏保持固定。现在，点击expand，然后向下滚动，注意左侧边栏现在未修复。

知道是否有针对此的本机 css 修复程序吗？

【问题讨论】：

【解决方案1】：

您可以使用like this one 的解决方法。它涉及为固定元素和容器切换左值（通过类）。

.global-wrapper {
    position: relative;
    -webkit-transition: 300ms;
    transition: 300ms;
}
.global-wrapper.expanded,
.global-wrapper.expanded .navbar {
    left: 200px;
}
.navbar {
    -webkit-transition: 300ms;
    transition: 300ms;
    position: fixed;
    width: 100px;
    height: 100%;
    top: 0px;
    left: 0px;
}
.content {
    position: relative;
    width: calc(100% - 170px); /* 100% - width of left bar plus margin */
}

用少量的香草JS来切换它的类：

var wrapper = document.querySelector(".global-wrapper");
document.getElementById("expand").onclick = function() {
        wrapper.classList.toggle("expanded");
}

【讨论】：

不需要javascript。
所以您不希望固定元素在单击按钮时移动？
Javascript 不需要，这里是纯css 解决方案。谢谢你的灵感。 jsfiddle.net/SR5ka/25
啊，是的。刚发帖我就想到了。很高兴看到我提供帮助！

【解决方案2】：

根据这个答案：https://stackoverflow.com/a/15251226/125264 可以通过将 dummy -webkit-transform 添加到需要修复的元素来修复此问题。为我工作。

编辑 04.2016

看起来已经不行了。

【讨论】：

Ciprian，你并不孤单，链接答案中的一些人也有问题。