css3变换还原位置：固定

使用css3

transform（）

时，

position:fixed

不适用。我制作了一个完整的JSFIDLE，展示了这个问题：

首先向下滚动，注意左侧边栏保持固定。现在，单击

展开

，然后向下滚动，注意左侧的边栏现在已修复

---

你知道是否有一个本机css修复程序吗？

你可以使用一个解决方案。它涉及到为固定元素和容器切换左值（通过类）

.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");
}

根据这一回答： 可以通过向需要修复的元素添加dummy-webkit转换来修复此问题。为我工作

编辑2016年4月

---

看起来不再工作了。

不需要javascript。因此，您不希望在单击按钮时固定元素移动？不需要javascript，下面是一个纯

css

解决方案。谢谢你的灵感。啊,对。我刚发帖就想到了这一点。很高兴看到我帮忙了！Ciprian，你并不孤单，链接答案上的一些人也有问题。