Shrink navbar while scrolling down using Bootstrap 3

Question

I am using Bootstrap 3 for developing a website. I need to create a navbar which should shrink as the user scrolls down.

Something like - http://osticket.com

How can I create this? I am using Bootstrap's fixed-top example as a starting point - http://getbootstrap.com/examples/navbar-fixed-top/

I need to put a logo onto the left instead of the text and it should reduce its size as the user scrolls down.

Solution 1

Good example of shrinking when scrolling has been documented here: http://www.bootply.com/109943

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

Solution 2

You can simply do it the same way they did it. If you look at the page source, they are simply adding a class to the body element when the page is scrolled. This class is overwriting the display format of the header.

To detect if the page has been scrolled down, they are using a javascript function with events listeners. You can look at the function source code here:

http://osticket.com/sites/all/themes/Porto/js/sticky.js

Solution 3

You have to add java-script for this function. CSS classes have to be updated accordingly to get the shrink on scroll affect. Complete example is shown on this link. http://www.bootply.com/109943#