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

Answer 2

この回答によると: https://stackoverflow.com/a/15251226/125264 この問題は、修正が必要な要素にダミー -webkit-transform を追加することで修正できます。私のために働いた。

編集 04.2016

もう機能しないようです。