不能使标签固定在顶部的导航栏部分后，点击

Question

编辑:我添加了窗口滚动功能，我使它，但标签下的内容从它。我怎样才能解决这个问题呢?

$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
console.log(true);
$(".tabs").addClass("tabs-position");
} else {
console.log(false);
$(".tabs").removeClass("tabs-position");
}
});
.tabs-position {
margin-bottom: 50px;
position:sticky;
top: 0;
background-color: red;
}

我有一个带有导航栏和选项卡的页面。当我单击它们时，我使用id属性将用户引导到同一页面中的部分，但是我的选项卡位于页面的中间，这很好。我想要实现的是移动他们在我的导航栏部分，当我点击他们。

我试了attribute后，但我没有得到它。我已经把我的代码包含在下面了，我如何替换他们的位置?

<section class="tabs">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="tab-outer">
<div class="tab-list">
<ul>
<li>
<a href="#room" class="tab-link">Rooms</a>
</li> 
<li>
<a href="#info">info tab</a>
</li>    
</ul>
</div>
</div>
</div>
</div>
</div>
</section>

.tabs {
margin-bottom: 50px;
.tab-outer {
border-bottom: 4px solid #f5f5f5;
position: sticky;
top: 70px;
padding: 20px 0 0 0;

}
.tab-list {
a {
color: #4a4947;
}

ul {
padding: 0 30px;
display: flex;
justify-content: space-between;
list-style-type: none;
}
}
}

Answer 1

你不能像那样嵌套CSS。相反，使用来选择任何级别的兄弟姐妹。而且，您必须将position:sticky放在正在滚动的元素的直接兄弟元素上。

.tabs {
margin-bottom: 50px;
position: sticky;
top: 0;
background-color: #ffffff;
}
.tabs .tab-outer {
border-bottom: 4px solid #f5f5f5;
top: 70px;
padding: 20px 0 0 0;
}
.tabs .tab-list a {
color: #4a4947;
}
.tabs .tab-list ul {
padding: 0 30px;
display: flex;
justify-content: space-between;
list-style-type: none;
}

<section class="tabs">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="tab-outer">
<div class="tab-list">
<ul>
<li>
<a href="#room" class="tab-link">Rooms</a>
</li>
<li>
<a href="#info">info tab</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<div style="height:3600px;width:100%;background-color:blue;color:white;">foo</div>

Answer 2

通过使用z-index我修复了这个问题

.tabs-position {
margin-bottom: 50px;
position:sticky;
top: 0;
background-color: red;
z-index: 1;
}