Bruno  Vincent Bruno Vincent - 1 year ago 86
Javascript Question

What code is used for dynamically shrinking navbars as you scroll down?

I have looking to duplicate this navbar for my site:

As you can see, when scrolling down, the navbar shrinks, what script is used for that?

Answer Source

It might be something like this:

jQuery(document).scroll(function() {      // Runs when page is scrolled
  var y = jQuery(this).scrollTop();        
  if (y > 100) {
    jQuery('nav').css('height', '80px');  // Changes after scroll distance of 100px
  } else {
    jQuery('nav').css('height', '200px'); // Reverts back when close to top
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download