JQueryスクロールと隠れていない見出し

Question

ユーザーがページのスクロールを開始すると表示される固定位置のヘッダーを生成しようとしています。私はJQuery（Angularを使っているページで）を使っていて、scrollTopが250pxを超えてすぐに消えるようにしたいと考えていました（display：noneを使っていました）。

ゆっくりと私のコードの作品を​​スクロールするが、スピードでダウン250ピクセルマーク以上が再表示され隠されるべきH1までスクロールしたとき：https://jsfiddle.net/gilestaylor/jpaqbm36/

を誰もが修正をお勧めしますか？それともこれを行うよりスマートな方法？ （任意のヒントを感謝ので、私はまだロープを学んでいる！）

HTML 
<header> 
    <h1>Order some food</h1> 
</header> 
<div id="bar"> 
<h1>Order some food</h1> 
</div> 

JS 
$(function() { 
    $(window).scroll(function() { 
    if ($(window).scrollTop() > 250) { 
     $('#bar').css({ 
     'height': '50px' 
     }); 
    $('#bar h1').fadeIn(1000);   
    } 
    else { 
     $('#bar').css({ 
      'height': '0' 
     }); 
     $('#bar h1').css({'display': 'none'}); 
    }; 
    }); 
}); 

Answer 1

fadeIn()の呼び出しは時間がかかります。要素を非表示にしたときや、.fadeIn()が再び呼び出されたときでも、アニメーション化されている可能性があります。したがって、いずれかの操作を行う前にアニメーションを停止するには、.stop()を使用する必要があります。また、を使用すると、.css({'display': 'none'})ではなく要素を非表示にすることができます。

jsfiddle

本当に必要なときにだけ変更を加える必要があり、右にかかわらず、コードを作ること。つまり、表示されていない場合にのみバーを表示するコードを実行し、コードが表示されている場合にのみ非表示にするコードを実行する必要があります。

$(function() { 
    var isBarShown = false; 

    function updateBar() { 
    if ($(window).scrollTop() > 250) { 
     if (!isBarShown) { 
     $('#bar').css({'height': '50px'}).find('h1').fadeIn(1000); 
     isBarShown = true; 
     } 
    } else { 
     if (isBarShown) { 
     isBarShown = false; 
     $('#bar').css({'height': '0'}).find('h1').stop().hide(); 
     } 
    } 
    } 

    $(window).scroll(function() { 
    updateBar(); 
    }); 

    updateBar(); 
}); 

注：.hide()に介在呼び出しなし.fadeIn()に二つの連続通話がなることはありませんので、この場合、.fadeIn()を呼び出す前.stop()を呼び出す必要はありません。

jsfiddle

Answer 2

代わりに一つだけのヘッダを持っていて、下にスクロールするとjQueryを使ってサイズを変更する必要があり2つの異なるヘッダを持ちます。 チェックこのhttps://jsfiddle.net/ktriek/jpaqbm36/5/モハメド・ユセフ@

$(function() { 
    $(window).scroll(function() { 
    var header = $('header'); 
    if ($(window).scrollTop() > 250) { 
      header.addClass("smaller");   
     } 
     else { 
       header.removeClass("smaller");  
     }; 
    }); 
});