[代码链接][1]
[1]: https://codepen.io/muhammad-shahzeb-raza/pen/mdRbXqX?editors=1100
我试图使我的导航停留在一点滚动期间使用位置=固定,但它不工作…好心的帮助
这很可能取决于您的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数据。