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://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!

Mcdevitt

Answer 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/

Rael

Dear anonymous down-voter: care to explain? How was this unhelpful? – Rael

@Aaroniker if you are still looking for a solution for firefox, looks like using $(document).scrolltop() works for chrome/firefox/ie11 – Hasa

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

});

Poseur

-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. – Rael

@AlienWebguy It´s just an example, see the text If so then hide the banner (or shrink or whatever). – Farika

Seriously why did this get upvotes? It's as pointless as $(window).unload(function(){$(this).close();} – Rael

He also said Something similar to what you can see at the IBM site: ibm.com/us/en – Rael

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

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 – Rael

@alienwebguy - wow, you swapped slideup/slidedown with an animate size instead. Sorry, I assumed asker wasn't brain dead. – Poseur

Doesn't change the fact that my answer is the correct one in this case. – Rael

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. – Mcdevitt

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. – Rael

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

Gravity