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

看起來不工作了。