9

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!

JordanBelf
  • 3,208
  • 9
  • 47
  • 80

3 Answers3

37

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/

AlienWebguy
  • 76,997
  • 17
  • 122
  • 145
4

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

});

mrtsherman
  • 39,342
  • 23
  • 87
  • 111
  • -1 This does not emulate the OP's example. This hides the nav completely which is pointless since you could just scroll without doing any animation and the nav would hide off the screen. – AlienWebguy Jul 15 '11 at 23:37
  • 1
    @AlienWebguy It´s just an example, see the text `If so then hide the banner (or shrink or whatever)`. – jeroen Jul 15 '11 at 23:40
  • Seriously why did this get upvotes? It's as pointless as `$(window).unload(function(){$(this).close();}` – AlienWebguy Jul 15 '11 at 23:41
  • He also said Something similar to what you can see at the IBM site: http://www.ibm.com/us/en/ – AlienWebguy Jul 15 '11 at 23:41
  • `So if someone can point me in the right direction it will make me really happy`. Definitely the right direction. – jeroen Jul 15 '11 at 23:43
  • Really? If someone asked you "how do i partially shrink my nav" you'd say use slideUp()? You really think that's the right direction? lol – AlienWebguy Jul 15 '11 at 23:47
  • 1
    @alienwebguy - wow, you swapped slideup/slidedown with an animate size instead. Sorry, I assumed asker wasn't brain dead. – mrtsherman Jul 16 '11 at 02:29
  • Doesn't change the fact that my answer is the correct one in this case. – AlienWebguy Jul 16 '11 at 04:00
  • Hey! wow, I cant understand why the discussion. For me (the one who asked the question) this solved my question because it gave me the inspiration about the `($(window).scrollTop() > 0)` part that I was not aware it existed. With that now I can play with the code myself. I hope this answers why I marked this answer as the correct one for me. edit: Oh, and also I happen to have seen this one before yours Alien, it was just that. Thanks a lot for your help too. – JordanBelf Jul 18 '11 at 20:10
  • Doesn't help future visitors find the best answer in the list though man. This is why answer threads aren't locked automatically after one is accepted. The best answer "at the time" isn't always the best answer. – AlienWebguy Jul 18 '11 at 20:18
1

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

Justin
  • 717
  • 1
  • 9
  • 15