我的导航修复面临的问题

Question

[代码链接][1]

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

我试图使我的导航停留在一点滚动期间使用位置=固定，但它不工作…好心的帮助

Answer 1

您可以将.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;
}

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

Answer 2

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

null

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;
}

html lang-html prettyprint-override"><div class="menu"> Menu </div>
<div class="content"> Content </div>