仅在 navbar-collapse 显示时使引导导航栏保持粘性

Question

我只想在显示折叠菜单时将导航栏置于固定位置。无论折叠功能触发器如何，我似乎都只能使其永久固定，这不是我想要的。

这就是我所拥有的

<nav class="navbar navbar-expand-lg navbar-light bg-white align-items-stretch">
  <a href="{{ url('/') }}" class="navbar-brand">
    <img class="navbar-logo img-fluid" src="{{ asset('img/generic.png') }}">
  </a>
  <button class="navbar-toggler collapsed" data-toggle="collapse" data-target="#navbar_collapse" aria-expanded="false">
    <span class="navbar-toggler-icon "></span>
  </button>
  <div class="navbar-collapse collapse align-items-stretch bg-white" id="navbar_collapse">
  <!--collapse menu code-->
  </div>
</nav>

并在我的 css 文件中指定仅在设备版本上的导航栏

    @media (max-width: 992px) {
        .navbar-fix  {
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            z-index: 10;
        }
    }

还有我的剧本

$( document ).ready(function() {
    $('.navbar').click(function(){
        $('.navbar.navbar-fixed').removeClass('navbar-fixed');
        $(this).addClass('navbar-fixed');
        console.log( "nav fix" );
    });
});

当折叠被隐藏时，它不会将其加载回相对位置。以及如何指定它仅在单击切换器时才固定？

Answer 1

要确切地辨别你在问什么有点困难，但我会试一试。

所以，当你说...

我只想在显示折叠菜单时将导航栏置于固定位置。无论折叠功能触发器如何，我似乎都只能将其永久固定。

您似乎很难在 lg(992px) 断点处更改导航栏位置属性。如果页面上没有更多内容，就很难确定在遇到断点时实际发生了什么。因此，我将您的 sn-p 插入到我的 IDE 中，添加了一些填充文本并使用 Chrome 的开发工具来查看发生了什么。

让我们在这里分解工作的组件......

对于导航栏，“navbar-expand-lg”类表示当屏幕为 992 像素或更大时展开/显示导航栏。所以折叠版本只有在尺寸小于 992px 时才会显示。

现在，您的 css sn-p 有一个针对 lg 断点（992px）的媒体查询。因此，@media 代码块中的样式将在屏幕为 992 像素或更少时应用。由于在此@media 查询中将位置属性设置为“固定”，因此当屏幕为 992 像素或更小时，导航栏将设置为固定。

把这一切放在一起，你

只有在显示折叠菜单时才想让我的导航栏进入固定位置。

当屏幕尺寸小于 992 像素时，会显示您的折叠菜单。当屏幕尺寸小于 992 像素时，您的 @media 查询将导航栏设置为固定。可以解决您的问题的是专门针对屏幕大于 992 像素时设置导航栏位置属性。

如果我没有回答正确的问题，或者如果您试图完全删除导航栏，除非显示折叠时，请查看显示设置以在 lg 断点处将其删除。

希望这会有所帮助！

Answer 2

由于您使用的是navbar-expand-,g，因此当视口宽度小于 992 像素时，导航栏会折叠。

弹性

首先，为导航栏和页面的主要内容使用容器。

<div>
  <nav class="navbar navbar-expand-md navbar-light bg-light">

  </nav>
  <main id"content">

  </main>
</div> 

顾名思义，nav 用于导航栏菜单，而 main 用于您的其余内容。

1. 对div 的所有父级使用h-100 类，包括html 和body。
2. 为div 使用d-flex、flex-column 和h-100 类。
3. 使用flex-grow-1 和flex-lg-grow-0 作为main 元素。
4. 当视口小于992px 时，将overflow:auto/scroll 用于main。

html, body {
  height: 100%;
}

@media (max-width: 992px) {
  .overflow-y-auto {
    overflow-y: auto;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex d-lg-block flex-column  bg-primary h-100 overflow-y-hidden">
  <nav class="navbar navbar-expand-md navbar-light bg-light navbar-fixed">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>
  <main class="flex-grow-1 flex-lg-grow-0 overflow-y-auto">
    <div class="container ">
      <div class="row">
        <div class="col">
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis, ipsum tempore molestiae praesentium asperiores iusto quod, sit cum ab veniam laudantium quia assumenda accusantium velit dolorem magni culpa rem nemo.
          Aspernatur corrupti officia magni perferendis reiciendis iure nisi eius inventore ab soluta eum quidem non ipsum aut sunt facilis deserunt ea dolor, blanditiis vel vitae temporibus voluptatem harum. Voluptatibus, eos.
          Ducimus reprehenderit repudiandae nihil magnam est atque vitae distinctio. Ad, est consequuntur, maxime ut tenetur voluptate culpa praesentium modi, voluptas repellat magnam alias esse animi doloribus. Maxime non quas et?
          Harum, tenetur. Beatae deserunt ipsa reiciendis adipisci, est velit eligendi quod optio obcaecati magni consequuntur blanditiis expedita modi. Quasi vitae maxime voluptates alias ipsam, ex aspernatur nesciunt aperiam eveniet pariatur?
          Nemo, explicabo? Quasi repudiandae consectetur similique, adipisci vitae error quia recusandae, eos quas fugiat quae expedita nisi hic libero. Cum distinctio blanditiis magnam, esse deserunt commodi totam vero soluta. Reprehenderit.
          Distinctio qui exercitationem vero provident totam, quis molestias illo eius iusto at atque aliquam excepturi! Quos omnis tempore, aut tempora odit consectetur possimus, dolore voluptates enim iste distinctio, perspiciatis sapiente.
          Eius eos reiciendis quis aliquam dolorum earum, assumenda deserunt animi consectetur accusantium sit numquam doloremque minima! Illo tenetur aliquam ea dicta eaque. Aspernatur animi optio hic provident obcaecati dicta ex.
          Tempora sed expedita, sunt minus ab saepe itaque, inventore placeat dolores eos voluptates fugit facilis explicabo cum eius quod excepturi neque veritatis molestiae quia magni soluta corporis rerum vero? Dignissimos.
          Aliquid pariatur placeat delectus, repellendus atque ullam obcaecati animi. Fugiat, at architecto? Inventore illum quidem unde molestiae eveniet placeat veritatis doloremque autem, tempora non cum adipisci tenetur ex iure esse.
          Rem et quisquam ad nesciunt, ipsa eligendi. Ipsa, libero magnam ducimus nihil minima odio. Officia, amet cum? Fugit aliquid consectetur, veritatis consequatur accusamus accusantium harum ex, error repellat fugiat excepturi.
        </div>
      </div>
    </div>
  </main>
</div>

https://codepen.io/anon/pen/Xwdzav

固定位置

使用与您相同的 CSS。但是，由于位置固定会从内容的正常流程中删除元素，因此您需要对页面的主要内容使用填充或边距顶部。它的大小应该大于或等于导航栏的高度。

@media (max-width: 992px) {
  .fixed-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000000;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-md navbar-light bg-light fixed-nav">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>
  <main class="bg-primary pt-lg-0 pt-5">
    <div class="container ">
      <div class="row">
        <div class="col">
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Debitis, ipsum tempore molestiae praesentium asperiores iusto quod, sit cum ab veniam laudantium quia assumenda accusantium velit dolorem magni culpa rem nemo.
          Aspernatur corrupti officia magni perferendis reiciendis iure nisi eius inventore ab soluta eum quidem non ipsum aut sunt facilis deserunt ea dolor, blanditiis vel vitae temporibus voluptatem harum. Voluptatibus, eos.
          Ducimus reprehenderit repudiandae nihil magnam est atque vitae distinctio. Ad, est consequuntur, maxime ut tenetur voluptate culpa praesentium modi, voluptas repellat magnam alias esse animi doloribus. Maxime non quas et?
          Harum, tenetur. Beatae deserunt ipsa reiciendis adipisci, est velit eligendi quod optio obcaecati magni consequuntur blanditiis expedita modi. Quasi vitae maxime voluptates alias ipsam, ex aspernatur nesciunt aperiam eveniet pariatur?
          Nemo, explicabo? Quasi repudiandae consectetur similique, adipisci vitae error quia recusandae, eos quas fugiat quae expedita nisi hic libero. Cum distinctio blanditiis magnam, esse deserunt commodi totam vero soluta. Reprehenderit.
          Distinctio qui exercitationem vero provident totam, quis molestias illo eius iusto at atque aliquam excepturi! Quos omnis tempore, aut tempora odit consectetur possimus, dolore voluptates enim iste distinctio, perspiciatis sapiente.
          Eius eos reiciendis quis aliquam dolorum earum, assumenda deserunt animi consectetur accusantium sit numquam doloremque minima! Illo tenetur aliquam ea dicta eaque. Aspernatur animi optio hic provident obcaecati dicta ex.
          Tempora sed expedita, sunt minus ab saepe itaque, inventore placeat dolores eos voluptates fugit facilis explicabo cum eius quod excepturi neque veritatis molestiae quia magni soluta corporis rerum vero? Dignissimos.
          Aliquid pariatur placeat delectus, repellendus atque ullam obcaecati animi. Fugiat, at architecto? Inventore illum quidem unde molestiae eveniet placeat veritatis doloremque autem, tempora non cum adipisci tenetur ex iure esse.
          Rem et quisquam ad nesciunt, ipsa eligendi. Ipsa, libero magnam ducimus nihil minima odio. Officia, amet cum? Fugit aliquid consectetur, veritatis consequatur accusamus accusantium harum ex, error repellat fugiat excepturi.
        </div>
      </div>
    </div>
  </main>

https://codepen.io/anon/pen/XwdzZr

您应该使用 boostrap 4.1 或更高版本，因为较低版本没有flex-grow-1

---

您可能会发现此链接也很有帮助。

Flush footer to the bottom of the page in bootstrap 4