如何在 Flexbox 对齐的侧边栏上模拟“位置：固定”行为

Posted 2023-03-06

【中文标题】如何在 Flexbox 对齐的侧边栏上模拟“位置：固定”行为

【英文标题】：How to simulate 'position:fixed' behavior on Flexbox-aligned sidebar

【发布时间】：2015-10-21 07:22:12

【问题描述】：

正如已经回答的 (How can I have a position: fixed; behaviour for a flexbox sized element?)，绝对/固定定位的盒子被从 Flexbox 对齐元素的正常流程中取出。但是我怎样才能至少模拟position: fixed 的行为，比如width: 300px; height: 100vw 元素？

这是一个初始布局的演示 (http://codepen.io/anon/pen/ZGmmzR)，左侧是侧边栏，右侧是内容块。我希望nav 像position: fixed 元素一样跟随用户滚动页面。我知道如何在没有 Flexbox 的情况下做到这一点。首先，我会考虑不使用 javascript 的纯 CSS 解决方案。谢谢！

【参考方案1】：

编辑：

一种不那么老套的解决方案可能是让容器 (.wrapper) 与屏幕一样高，并且只在 <section> 主元素上添加滚动：

.wrapper 
    display: flex;
    height: 100vh;


section 
    flex: 1 1 auto;
    overflow: auto;

http://codepen.io/Sphinxxxx/pen/WjwbEO

原答案：

您可以简单地将 <nav> 中的所有内容放入一个包装器（此处为：nav-wrapper），然后修复该包装器：

...
.nav-wrapper 
    position: fixed;
    top: 0; left: 0;


<nav role="navigation">
    <div class="nav-wrapper">
        ...
    </div>
</nav>

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

【讨论】：

这是非常正确和明显的解决方案。下次上班前我真的应该休息一下。谢谢！

这仅在导航位于其中一个边缘时才有效，因为position: fixed 相对于视口的位置。因此，如果您像我一样尝试在居中的 flex 容器中修复导航，这将无济于事。

@VickyChijwani - 这种布局会是什么样子？有演示吗？

Flex 解决方案有效，但具有溢出属性的内容滚动位置在刷新时被破坏（位置不记得）。

@Burrich 我在此答案中使用了类似于已编辑解决方案的 flex 布局。 css-tricks.com 从 Twitter 帖子 (twitter.com/hakimel/status/1262337065670316033) 中引用了一个简单的 JavaScript 和本地存储解决方案，用于记住侧边栏 div（或任何 div）的滚动位置。 css-tricks.com/memorize-scroll-position-across-page-loads。请参阅阅读器 cmets 以获取对推文中代码的建议修改。