javascript - scrollTop() を使用してスムーズなトランジションを取得する

Question

私は大学のウェブサイトで固定ヘッダーを少し廃止しようとしていますが、画面が小さい人にはうまく機能すると思いますが、どこにいてもヘッダーを利用できるのが好きな人を喜ばせる方法を考え出しましたページ。

私の問題を説明するのはちょっと難しいので、ここに例へのリンクがあります: http://codepen.io/daless14/pen/smdou

コード：

$('body').prepend('<div class="show-menu">MENU</div>');

$(window).scroll(function(){  
  if ($('.header').is(':hover')) { 
    $('.header').css('top', '0px');
  }
  else if ($(this).scrollTop() < 85) { 
    $('.header').css({'position': 'absolute', 'top': '0px'}); 
    $('.header-content').fadeIn(100);
  }
  else if ($(this).scrollTop() > 85) {
    $('.header').css({'position': 'fixed', 'top': '-85px'});
    $('.header-content').fadeOut(100);
  }
});

$('.show-menu').click(function() {
  $('.header').animate({'top': '0px'},150);
  $('.header-content').fadeIn(400);
});

ヘッダーは、ウィンドウが 85 ピクセルを超えてスクロールするまで絶対位置にあり、その後上部に固定され、小さなメニュー ボタンが表示されます。ユーザーが画面の下部にいる場合、[メニュー] をクリックしてヘッダーを下にスライドさせて表示することができます。私の唯一の問題は、ユーザーが再びスクロールすると (ヘッダー要素にカーソルを合わせていない場合)、ヘッダーがスライドして戻ることです。現在、「ジャンプ」してバックアップします。

ヘッダー要素に CSS トランジションを追加して、それを修正しましたが、他の領域が壊れてしまいました。

これをスムーズにする方法について誰かがアイデアを持っているかどうか、ただ興味があります。

ありがとう！