鞋带肚脐固定顶
鞋带肚脐固定顶
提问于 2018-07-03 20:03:35
我有一个网站，有一个肚脐固定到网站顶部，它跟踪时，滚动。这个特性通过引导很好地工作，并且应该保持不变。我需要添加一个固定的50 to容器以上的导航栏，不跟踪与导航栏。当我试图实现它时，导航条要么覆盖它，要么跟踪容器。
<header>
<nav class="navbar navbar-nav navbar-dark bg-alumni navbar-expand-md fixed-top nav-fill">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="nav-link nav-item navbar-brand nav-justified" href="beta.html#">
<img src="images/AlumniHallName_solo.svg" class="d-inline-block float-lg-left float-md-left" id="nav-logo">
</a>
<div class="collapse navbar-collapse justify-content-end col-lg-4 col-md-6" id="navbarNav">
<a class="nav-link nav-item link" href="beta.html">About</a>
<a class="nav-link nav-item link" href="faith.html">Faith</a>
<a class="nav-link nav-item link" href="sports.html">Sports</a>
<a class="nav-link nav-item link" href="pups.html">Pups</a>
</div>
</div>
</nav>
</header>回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-03 20:28:53
这是我能想到的。它使用jQuery动态地将导航条更改为固定条。您可以使用console.log测试何时切换到固定导航菜单。我将在这里发布一些代码，但我建议查看我的代码笔这里。
$(function() {
$(window).scroll(function() {
//use this number to determine when to switch to fixed menu
console.log($(window).scrollTop())
if ($(window).scrollTop() > 55) $('#navbar').addClass('navbarFixed');
if ($(window).scrollTop() < 56) $('#navbar').removeClass('navbarFixed');
});
});.banner {
height: 50px;
width: 100%;
background-color: red;
}
#navbar {
border: 0;
background-color: #4080ff;
border-radius: 0px;
margin-bottom: 0;
height: 30px;
}
.navbarFixed {
top: 0;
position: fixed;
width: 100%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="banner">Hello, Alec!</div>
<div id="navbar">
<a>About</a>
<a>Faith</a>
<a>Sports</a>
<a>Pups</a>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51162108
复制相关文章
相似问题
腾讯云开发者
