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-header 正上方，并确保它具有 position: fixed 和 z-index 大于 3，如下所示：https://codepen.io/cmarius/pen/JjEPZQy

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

但是，值得一提的是，您的标题元素应该只包含标题数据。

在修复我的导航时遇到问题

2 个答案: