在修复导航时遇到问题

Question

[代码链接][1]

[1]: https://codepen.io/muhammad-shahzeb-raza/pen/mdRbXqX?editors=1100

我试图在滚动过程中使用Position=fixed使导航停留在某个点，但它不起作用。

Answer 1

这很可能取决于您的HTML结构。考虑将导航HTML移到包装器之外。例如：

body {
margin:0;
}
.menu {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
height:40px;
box-sizing:border-box;
border-bottom:1px solid #d9d9d9;
position:fixed;
background:white;
}
.content {
width:100%;
height:3000px;
background:#f1f1f1;
margin-top:40px;
}

<div class="menu"> Menu </div>
<div class="content"> Content </div>

Answer 2

您可以将.header_nav移动到#section标头的正上方，并确保其位置为固定，z索引大于3，如下所示：https://codepen.io/cmarius/pen/JjEPZQy

&__nav{
z-index: 4;
border-bottom: .1rem solid $color-light;
position: fixed;
}

不过，值得一提的是，header元素应该只包含header数据。