代码之家  ›  专栏  ›  技术社区  ›  Kait Jardine

引导粘性顶部导航条在滚动条上消失

  •  0
  • Kait Jardine  · 技术社区  · 7 年前

    导航栏一直贴在顶部,直到我从英雄图像中滚动出来,然后消失。我希望导航栏贯穿整个页面。有什么想法吗?

    <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>
    
    1 回复  |  直到 7 年前
        1
  •  4
  •   Deevoid    5 年前

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

    e、 g.删除以下内容:

    body { height 100 vh or %;}
    

        2
  •  3
  •   Tibbelit    7 年前

    你可以尝试使用 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 )