How to Shrink Navigation Bar on Scroll

With the following code you can turn on page scroll event a fixed top navigation bar into a shrinking element. We are using Bootstrap 3 and JQuery.

Supposing your top navigation bar has a .navbar class here’s the javascript:

By writing these lines we are appending to the .navbar element the additional class .navbar-solid on page scroll.

We can now easily define a specific style for the bar, that will affect the element only on page scroll.

In this case we are making the navbar transparent and shorter.