css3 transform reverts position：fixed

问题描述

当使用css3 transform（）， position：fixed 不适用。我做了一个全面工作的jsFiddle显示问题：

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.

任何想法，如果有一个本地css修复这个？

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

推荐答案

href =http://jsfiddle.net/ft2d600s/ =nofollow> 喜欢这个 。它涉及为固定元素和容器切换左值（通过类）。

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

用于切换类的vanilla JS的数量：

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

这篇关于css3 transform reverts position：fixed的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！