При использовании css3 transform(), position: fixed не применяется. Я сделал полностью рабочий jsFiddle, показывая проблему: http://jsfiddle.net/SR5ka/
Сначала прокрутите вниз, заметите, что левая боковая панель остается фиксированной. Теперь нажмите expand и прокрутите вниз, заметив, что левая боковая панель теперь не.
Любая идея, если для этого есть встроенное исправление css?
Вы можете использовать работу как этот. Он включает в себя перемещение левого значения (через класс) как для фиксированного элемента, так и для контейнера.
.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");
}
В соответствии с этим ответом: fooobar.com/info/51483/... Эту проблему можно устранить, добавив фиктивный -webkit-преобразование в элемент, который необходимо устранить. Работал для меня.
Изменить 04.2016
Похоже, больше не работает.