9

私が開発中の新しいサイトでは、ユーザーが下にスクロールしたときにナビゲーション メニューを縮小したいと考えています。

IBM サイトで見られるものと同様のもの: http://www.ibm.com/us/en/

jQuery の実装やチュートリアルが見つかりませんでした (間違ったキーワードを検索しているに違いないと確信しています)。

だから誰かが私を正しい方向に向けることができれば、それは私を本当に幸せにします.

前もって感謝します！

4

3 に答える 3

37

ほら、どうぞ。

$(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/

于 2011-07-15T23:36:22.600 に答える
4

あなたがすることは、ウィンドウのスクロール値をチェックすることです。ゼロより大きい場合、ユーザーは下にスクロールしています。その場合は、バナーを非表示にします (または縮小するなど)。彼らがトップに戻ったら、それを再表示します。

http://jsfiddle.net/rxXkE/

$(window).scroll(function () { 
console.log($(window).scrollTop());
if ($(window).scrollTop() > 0) {
    $(".banner").slideUp();
}
else {
     $(".banner").slideDown();   
}

});

于 2011-07-15T21:43:04.443 に答える
1

これにより、ユーザーがスクロールすると、ナビゲーション バーが縮小および拡大します。これはhttp://www.kriesi.at/themes/enfold/ナビゲーション バーから作成されました。私が作成したバージョンはほぼ同じように動作します。https://github.com/Jlshulman/Elastic-Bar

于 2013-10-22T15:37:22.227 に答える