提问者:小点点

我的导航修复面临的问题


[代码链接][1]

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

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


共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;
}
<div class="menu"> Menu </div>
<div class="content"> Content </div>

匿名用户

您可以将.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数据。

相关问题