How to shrink navigation menu when scrolling down?

Question

For a new site I am developing I would love to shrink the navigation menu when the user scrolls down.

Something similar to what you can see at the IBM site: http://w

Answer 1

What you do is check the scroll value of the window. If it is greater than zero then the user has scrolled down. If so then hide the banner (or shrink or whatever). If they go back to the top then reshow it.

http://jsfiddle.net/rxXkE/

$(window).scroll(function () { 
console.log($(window).scrollTop());
if ($(window).scrollTop() > 0) {
    $(".banner").slideUp();
}
else {
     $(".banner").slideDown();   
}

});

Answer 2

Here you go man:

$(function(){
  var navStatesInPixelHeight = [40,100];

  var changeNavState = function(nav, newStateIndex) {
    nav.data('state', newStateIndex).stop().animate({
      height : navStatesInPixelHeight[newStateIndex] + 'px'
    }, 600);    
  };

  var boolToStateIndex = function(bool) {
    return bool * 1;    
  };

  var maybeChangeNavState = function(nav, condState) {
    var navState = nav.data('state');
    if (navState === condState) {
      changeNavState(nav, boolToStateIndex(!navState));
    }
  };

  $('#header_nav').data('state', 1);

  $(window).scroll(function(){
    var $nav = $('#header_nav');

    if ($(document).scrollTop() > 0) {
      maybeChangeNavState($nav, 1);
    } else {
      maybeChangeNavState($nav, 0); 
    }
  });
});

Demo: http://jsfiddle.net/seancannon/npdqa9ua/

Answer 3

This shrinks and grows the navigation bar as the user scrolls. Created this off of http://www.kriesi.at/themes/enfold/ navigation bar. The version i created works nearly the same. https://github.com/Jlshulman/Elastic-Bar