如何制作没有位置的粘性导航栏：固定

Question

我有一个HTML模板，我需要不使用position: fixed来固定他的左侧边栏（不滚动），因为它会破坏所有模板。

<div class="layout-w">

    <!-- menu -->
    <div class="menu">
         <!-- elements here -->
    </div>

    <!-- content -->
    <div class="content">
        <!-- Elements here -->
    </div>

</div>

这是CSS

.layout-w {
    display: flex;
}

.menu {
    display: flex;
    flex-direction: column;
}

.content {
    flex: 1;
}

我该怎么做？

Answer 1

您可以将菜单div放到另一个div中，高度为100％，并且background-color：transparent。

<div class="layout-w">

<!-- menu -->
<div class="menu-container">
    <div class="menu">
     <!-- elements here -->
     </div>
</div>


<!-- content -->
<div class="content">
    <!-- Elements here -->
</div>

并在CSS文件中：

.menu-container { height: 100%; background-color: transparent; }
.menu { postion: fixed }