如何在Flexbox对齐的侧边栏上模拟“位置:固定”行为
As it was already answered (How can I have a position: fixed; behaviour for a flexbox sized element?) absolutely/fixed positioned boxes are taken out of the normal flow of Flexbox-aligned elements. But how can I at least simulate position: fixed
behavior of, say, width: 300px; height: 100vw
element?
这里是一个演示( http://codepen.io/anon/pen/ZGmmzR ),其中侧边栏在左侧,内容块在右侧。我想在用户在页面上滚动后, nav
像 position:fixed
元素。我知道如何做没有Flexbox。首先,我将考虑纯CSS解决方案,而不使用JavaScript。
Here is a demo (http://codepen.io/anon/pen/ZGmmzR) of initial layout with sidebar on the left and content block on the right. I would like nav
act like position: fixed
element following user's scroll across the page. I know how to do it without Flexbox. In the first place I would consider pure CSS solution without using JavaScript. Thank you!
您可以简单地将< nav>
在
...
.nav-wrapper {
position: fixed;
top: 0; left: 0;
}
<nav role="navigation">
<div class="nav-wrapper">
...
</div>
</nav>