Bootstrap 顶部导航栏在滚动时消失答案

【问题标题】：Bootstrap sticky-top navbar disappearing on scrollBootstrap 顶部导航栏在滚动时消失
【发布时间】：2019-06-05 16:48:41
【问题描述】：

导航栏一直停留在顶部，直到我滚动出英雄图像然后消失。我希望导航栏出现在整个页面中。有任何想法吗？

<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>

【问题讨论】：

这是我的问题：stackoverflow.com/questions/49848196/…

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

只需从 CSS 中的 body 标记中删除任何高度声明即可。

例如删除这样的东西：

body { height 100 vh or %;}

编辑：还要确保将 top:0 赋予您的粘性导航栏元素

【讨论】：

【解决方案2】：

您可以尝试使用fixed-top 而不是sticky-top。

我不知道您使用的是哪个浏览器，但文档说明 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)

【讨论】：