如何在Bootstrap固定底部导航栏中添加词缀 [英] How to Add Affix to Bootstrap Fixed Bottom Navbar

问题描述

首先，请告知我已经知道，我们可以在Bootstrap中将affix实用程序添加到所有常规navbar中，但是，我需要将词缀添加到特定的导航栏.

First of all, please be inform that I already know, we can add affix utility to all kind of regular navbar in Bootstrap, In my case ,however, I need to add the affix to a specifically navbar-fixed-bottom Navbar.

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-bottom">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container -->
</nav>
<div class="container" style="height:3000px;"></div>

我想这样做的原因是，在页面加载时将导航栏显示在viewport的底部，并向下滚动将其粘贴到顶部.

The reson that I would like to do this is presenting the navbar at the bottom of viewport on page loading and on scroll down affix it to the top.

您能告诉我这是否可行吗?

Can you please let me know if this is doable?

推荐答案

应用affix时，您需要添加CSS来处理导航栏.在您的情况下，这将更改导航栏top:0;，以使其不再固定在底部.

You need to add CSS to handle the navbar when affix is applied. In your case, that would be changing the navbar top:0; so that it no longer is fixed to the botttom.

.affix.navbar-fixed-bottom {
    top: 0;
    height: 50px;
}

https://www.codeply.com/go/jYikJAul9j

这篇关于如何在Bootstrap固定底部导航栏中添加词缀的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！