当使用css3 transform()时,position:fixed不适用。我做了一个充分的工作jsFiddle显示的问题:
http://jsfiddle.net/SR5ka/
首先向下滚动,注意左侧边栏保持固定。现在,点击展开,然后向下滚动,注意左侧边栏现在不固定。
任何想法,如果有一个本机css修复这个?
解决方法
您可以使用
like this one周围的工作。它涉及为固定元素和容器切换左值(通过类)。
.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"); }