仅当显示导航栏折叠时，使引导导航栏变粘

时间：2019-05-10 02:01:49

标签： jquery bootstrap-4 navbar

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

这就是我所拥有的

<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" );
    });
});

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

2 个答案:

答案 0 :(得分：0)

要确切地知道您的要求有点困难，但我会给您一个机会。

所以，当您说...

  

仅当显示折叠菜单时，我才想将导航栏固定在一个位置。似乎无论折叠函数触发器如何，我都只能使其永久固定。

似乎您在更改lg（992px）断点处的导航栏位置属性时遇到困难。如果页面上没有更多内容，则很难确定到达断点后实际发生了什么。因此，我将您的代码段插入了我的IDE中，添加了一些填充文本，并使用Chrome的开发工具进行了测试，以了解发生了什么。

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

对于导航栏，类“ navbar-expand-lg”表示在屏幕大于或等于992px时展开/显示导航栏。因此，仅当尺寸小于992px时，才会显示折叠的版本。

现在，您的css片段具有针对lg断点（992px）的媒体查询。因此，当屏幕小于或等于992px时，@ media代码块中的样式将适用。由于在此@media查询中将position属性设置为“固定”，因此当屏幕小于或等于992px时，导航栏将设置为固定。

将所有内容放在一起

  

仅在显示折叠菜单时才想将导航栏固定在一个位置。

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

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

希望这会有所帮助！

答案 1 :(得分：0)

由于您使用的是<div> <nav class="navbar navbar-expand-md navbar-light bg-light"> </nav> <main id"content"> </main> </div> ，因此当视口宽度小于992px时，导航栏会折叠。

flex

首先，在导航栏和您页面的主要内容中使用一个容器。

h-100

顾名思义，nav用于导航栏菜单，main用于其他内容。

  1. 对div的所有父级使用html类，包括body和d-flex。
  2. 为flex-column使用h-100，div和flex-grow-1类。
  3. 为flex-lg-grow-0元素使用main和overflow:auto/scroll。
  4. 当视口小于main时，将992px用于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>
@media (max-width: 992px) {
  .fixed-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000000;
  }
}

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

固定位置

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

<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>
flex-grow-1

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

您应使用boostrap 4.1或更高版本，因为较低的版本没有collect_list

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

Flush footer to the bottom of the page in bootstrap 4

相关问题
最新问题