How to shrink navigation menu when scrolling down?

问题

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://www.ibm.com/us/en/

I couldn't find any jQuery implementation or tutorial around (I am sure I must be searching the wrong keywords)

So if someone can point me in the right direction it will make me really happy.

Thanks in advance!

回答1:

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/

回答2:

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();   
}

});

回答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

来源：https://stackoverflow.com/questions/6713324/how-to-shrink-navigation-menu-when-scrolling-down