时间戳

首页 > 解决方案 > 仅当 NavBar 未折叠时如何“固定顶部”？

html - 仅当 NavBar 未折叠时如何“固定顶部”？

问题描述

我用 Bootstrap 5 创建了一个 NavBar。它完美无瑕，我还没有解决的唯一问题如下：

当用户将其视图的大小增加到 <300% 时，它将触发折叠按钮显示。如果他上升到 500%，折叠的 NavBar 将覆盖整个屏幕，您将无法再看到 NavBar 的底部。现在的问题：因为它固定在站点顶部，向下滚动不会做任何事情，所以用户被迫查看切割的导航栏，直到他选择一条路线。我知道这是一种罕见的情况，但可能有一些解决方案。也许您为折叠的导航栏创建了一个新的自定义布局，或者您将“固定顶部”限制为仅未折叠的状态。但我不知道什么是最好的解决方案，以及如何实施。

https://imgur.com/a/LnlifRx

<html>

<head>

<!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

<style type="text/css">
    
/* BANNER*/
.bg-steel {
    background-color: #000000;
}

/* BRAND */
.site-header .brand {
    font-family: 'Arial';
    font-size: 300%;
    color: #ffffff;
}

/* ROUTES */
.site-header .navbar-nav .nav-link {
    font-family: 'Arial';
    font-size: 250%;
    color: #ffffff;
}

</style>

</head>

<body>
    <header class="site-header">
      <nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top py-0 my-0">

<!-- Navbar Left Side -->

        <div class="container d-flex bd-highlight">
                    <a class="navbar-brand mr-4 brand" href="{% url 'home' %}">MyWebsite</a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNavDropdown">
                    <ul class="navbar-nav flex-row flex-wrap bd-navbar-nav pt-2 py-md-0">

                            <li class="nav-item col-6 col-md-auto">
                                <a class="nav-link p-2" href="{% url 'home' %}">Home</a>
                            </li>

                            <li class="nav-item col-6 col-md-auto">
                                <a class="nav-link p-2" href="#">Docs</a>
                            </li>

                    </ul>
                    
<!-- Navbar Right Side -->

                    <ul class="navbar-nav flex-row flex-wrap ms-md-auto">

                        <li class="nav-item col-6 col-md-auto">
                            <a class="nav-link p-2" href="#">Login</a>
                        </li>

                        <li class="nav-item col-6 col-md-auto">
                            <a class="nav-link p-2" href="#">Register</a>
                        </li>

                    </ul>
                    
              </div>
        </div>
      </nav>
    </header>
</body>

</html>```

标签： htmlcssnavbarbootstrap-5

解决方案

要修复顶部，通常您应用 Bootstrap 的fixed-top类。由于您希望仅在展开顶部时固定顶部，因此您可以创建自定义fixed-top-lg类（或 sm 或 md - 您的选择）。

您需要为导航栏下方的部分或容器设置间距以保持间距 - 请参阅代码段。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>

<style>
    @media (min-width:992px) {
        .fixed-top-lg {
            position:fixed;
            top:0;
            right:0;
            left:0;
            z-index:1030;
        }
    }
</style>

<nav class="navbar navbar-expand-lg fixed-top-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<section class=" vh-100 bg-info mt-0 mt-lg-5">
    <div class="container pt-lg-2">
        <div class="row">
            <div class="col-12">
                <p>Content below the navbar &mdash; included to show the spacing that&rsquo;s needed.</p>
            </div>
        </div>
    </div>
</section>

推荐阅读