[英]Bootstrap sticky-top navbar disappearing on scroll
The navbar sticks to the top until I scroll out of the hero-image then disappears.导航栏一直停留在顶部,直到我滚动出英雄图像然后消失。 I'd like the navbar to be present throughout the whole page.
我希望导航栏出现在整个页面中。 Any ideas?
有任何想法吗?
<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projects">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact Me</a>
</li>
</ul>
</div>
</nav>
<!--Navbar end-->
<!-- Homescreen hero -->
<div class="hero-image" id="home">
<div class="hero-text">
<h1 class="name">Text</h1>
<h1>Text</h1>
</div>
</div>
Just remove any height declaration from the body tag in your css.只需从 css 中的 body 标记中删除任何高度声明。
eg Remove things like this:例如删除这样的东西:
body { height 100 vh or %;}
Edit: Also make sure to give top:0 to your sticky navbar element编辑:还要确保为您的粘性导航栏元素提供 top:0
You can try to use fixed-top
instead of sticky-top
.您可以尝试使用
fixed-top
而不是sticky-top
。
I don't know which browser you're using, but the documentation states Also note that .sticky-top uses position: sticky, which isn't fully supported in every browser.
我不知道您使用的是哪种浏览器,但文档指出
Also note that .sticky-top uses position: sticky, which isn't fully supported in every browser.
( https://getbootstrap.com/docs/4.2/components/navbar/#placement ) ( https://getbootstrap.com/docs/4.2/components/navbar/#placement )
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.