Css3を使用する場合transform()
、position: fixed
適用されません。私は問題を示す完全に機能するjsFiddleを作りました: http://jsfiddle.net/SR5ka/
最初に下にスクロールします。左側のサイドバーは固定されたままです。 expand
をクリックして下にスクロールすると、左側のサイドバーが固定されていないことに注意してください。
これに対してネイティブのcss修正がある場合、何か考えはありますか?
this this のような回避策を使用できます。これには、固定要素とコンテナの両方の(クラスを介して)左の値を切り替えることが含まれます。
.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");
}
この回答によると: https://stackoverflow.com/a/15251226/125264 この問題は、修正が必要な要素にダミーの-webkit-transformを追加することで修正できます。私のために働いた。
編集04.2016
動作しないように見えます。