Bootstrap 粘性頂部導航欄在滾動時消失

Question

導航欄一直停留在頂部，直到我滾動出英雄圖像然后消失。 我希望導航欄出現在整個頁面中。 有任何想法嗎？

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

Answer 1

只需從 css 中的 body 標記中刪除任何高度聲明。

例如刪除這樣的東西：

body { height 100 vh or %;}

編輯：還要確保為您的粘性導航欄元素提供 top:0

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