css3变换恢复位置:固定

Question

使用css3时transform(),position: fixed不适用.我做了一个完全工作的jsFiddle显示问题:http://jsfiddle.net/SR5ka/

首先向下滚动,注意左侧边栏保持固定.现在,单击expand,然后向下滚动,注意左侧边栏现在没有修复.

知道是否有本地css修复此问题？

Answer 1

您可以使用像这样的解决方法。它涉及切换固定元素和容器的左值（通过类）。

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