2

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>

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?

user1760110
  • 2,256
  • 5
  • 29
  • 37

1 Answers1

1

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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • Thanks a lot Zim but is there any way we can add animation to it? I mean right now it looks like the navbar is jumping to the top! is there any way we can have smooth scroll there? – user1760110 Nov 23 '16 at 18:13
  • Yes, it's possible.. you need the add the CSS for it. Read here to learn about the affix classes http://getbootstrap.com/javascript/#affix-usage – Carol Skelly Nov 23 '16 at 18:15