css3变换还原位置：固定

Question

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

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

任何想法，如果有一个本地的CSS修复？

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

Answer 2

根据此答案：https://stackoverflow.com/a/15251226/125264 此问题可以通过添加伪固定-webkit变换到元件，其需要修复。为我工作。

编辑04.2016

看起来不工作了。