Comment ajouter un affixe à la barre de navigation inférieure fixe de Bootstrap

Question

Tout d'abord, s'il vous plaît être informé que je sais déjà, nous pouvons ajouter affix utilité pour tous les types d'habitués navbar dans Bootstrap. Dans mon cas, cependant, j'ai besoin d'ajouter l'affixe à un objet spécifique. navbar-fixed-bottom Barre de navigation.

@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>

La résonance que je voudrais faire est de présenter la barre de navigation en bas de viewport au chargement de la page et au défilement vers le bas en l'apposant en haut.

Pouvez-vous me dire si c'est faisable ?

Answer 1

Vous devez ajouter un CSS pour gérer la barre de navigation lorsque affix est appliqué. Dans votre cas, il s'agirait de modifier la barre de navigation. top:0; afin qu'il ne soit plus fixé au fond.

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

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