css3 transform reverts position: fixed

Question

When using a css3 transform(), position: fixed does not apply. I made a fully working jsFiddle showing the issue: http://jsfiddle.net/SR5ka/

First scroll down, notice the left-hand sidebar stays fixed. Now, click expand, and scroll down, notice the left-hand sidebar is now not fixed.

Any idea if there is a native css fix for this?

Answer 1

You could use a work around like this one. It involves toggling a left value (via a class) for both the fixed element and the container.

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

With a small amount of vanilla JS to toggle it the class:

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