Shrinking navigation bar when scrolling down (bootstrap3)

Question

I would like to build a navigation-bar effect like it is on http://dootrix.com/ on my page (after scrolling down the bar getting smaller and the logo changes). Im using bootstrap 3 for my page. Is there an easy way to realize it with bootstrap?

Answer 1

Sticky navbar:

To make a sticky nav you need to add the class navbar-fixed-top to your nav

Official documentation:
https://getbootstrap.com/docs/5.0/components/navbar/#placement

Official example:
http://getbootstrap.com/examples/navbar-fixed-top/

A simple example code:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">   <div class="container">     ...   </div> </nav> 

with related jsfiddle: http://jsfiddle.net/ur7t8/

Resize the navbar:

If you want the nav bar to resize while you scroll the page you can give a look to this example: http://www.bootply.com/109943

JS

$(window).scroll(function() {   if ($(document).scrollTop() > 50) {     $('nav').addClass('shrink');   } else {     $('nav').removeClass('shrink');   } }); 

CSS

nav.navbar.shrink {   min-height: 35px; } 

Animation:

To add an animation while you scroll, all you need to do is set a transition on the nav

CSS

nav.navbar{   background-color:#ccc;    // Animation    -webkit-transition: all 0.4s ease;    transition: all 0.4s ease; } 

---

I made a jsfiddle with the full example code: http://jsfiddle.net/Filo/m7yww8oa/