CODEWITHSUNDEEP
jquerycssmenuscrollshrink
JordanBelf
JordanBelf

Reputation: 3338

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!

Upvotes: 9

Views: 33480

Answers (3)

SeanCannon
SeanCannon

Reputation: 77996

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/

Upvotes: 37

Justin
Justin

Reputation: 755

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

Upvotes: 1

mrtsherman
mrtsherman

Reputation: 39882

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

});

Upvotes: 4

Related Questions