向下滚动时如何缩小导航菜单? [英] 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.

类似于您在 IBM 站点上看到的内容:http://www.ibm.com/us/en/

Something similar to what you can see at the IBM site: http://www.ibm.com/us/en/

我找不到任何 jQuery 实现或教程(我确定我一定是在搜索错误的关键字)

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.

提前致谢！

推荐答案

开始吧伙计:

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

演示:http://jsfiddle.net/seancannon/npdqa9ua/

这篇关于向下滚动时如何缩小导航菜单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！