如何在Flexbox对齐的侧边栏上模拟“位置：固定”行为 [英] How to simulate 'position:fixed' behavior on Flexbox-aligned sidebar

问题描述

因为它已经回答了（如何获得一个位置：固定;对于flexbox大小的元素的行为？）绝对/固定的定位框是从正常的Flexbox对齐的元素流中取出的。但是我怎么能至少模拟 position：fixed 行为，例如 width：300px;

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>

http ：//codepen.io/anon/pen/PqXYGM

这篇关于如何在Flexbox对齐的侧边栏上模拟“位置：固定”行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！