[英]How to add a second sticky navbar on scroll of a particular section, under the primary fixed-top navbar, in jquery & bootstrap 5?
[英]Cant make tabs fixed at top under navbar section after clicked
编辑:我添加了我制作的windo滚动功能,但选项卡下的内容从它开始。 我该如何解决?
$(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;
}
}
}
你不能像那样嵌套 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>
通过使用 z-index 我解决了这个问题
.tabs-position {
margin-bottom: 50px;
position:sticky;
top: 0;
background-color: red;
z-index: 1;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.