css3 बदले में स्थिति बदलता है: निश्चित

Question

एक css3 transform() का उपयोग करते समय, position: fixed लागू नहीं होता है। मैंने पूरी तरह से काम कर रहा jsFiddle मुद्दा दिखा रहा है: http://jsfiddle.net/SR5ka/

पहले स्क्रॉल करें, बाएं हाथ की साइडबार तय रहें। अब, expand पर क्लिक करें, और नीचे स्क्रॉल करें, बाएं हाथ की साइडबार पर ध्यान दें अब तय नहीं है।

कोई विचार अगर इसके लिए मूल सीएसएस तय है?

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 */ 
} 

वेनिला जे एस की एक छोटी राशि के साथ

यह वर्ग टॉगल करने के लिए:

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

की तरह अब और काम नहीं करता है लगता है।