スクロール位置に基づいてナビゲーションバーをフェードインおよびフェードアウトする方法

Question

私は、ユーザーがヘッダーの下をスクロールすると、表示したいと思っていてゆっくりとフェードインする垂直ナビゲーションバーを持っています。同様に、ユーザーがヘッダーにスクロールすると、ナビゲーションバーが消えてゆっくりと消えてしまいます。これは私の現在の関数である：

$(window).scroll(function() { 
     var scrollPos = $(window).scrollTop(); 
     if (scrollPos < 650) { 
      $('.navbar').fadeOut(4000); 
     } else { 
      $('.navbar').fadeIn(4000); 
     } 
    }); 

これの問題は、私は、ヘッダー（または650の具体的位置）の下にスクロールすると、ナビゲーションバーがすぐに完全に不透明に表示されていることを、ゆっくり、ゆっくりとバックフェードアウトその後、フェードアウトされますヘッダーにスクロールすると、すぐに消えます。どのように私はこれを修正して、望ましい動作を得ることができますか？

Answer 1

CSS遷移を使用するように変更し、スクロールイベントに対してもわずかなデバウンスを追加しました。ストーンAdriani6さんのバイオリン@からマークアップ、：P

(function(){ 
 
    var timeout; 
 
    var $window = $(window); 
 
    var $navbar = $('.navbar'); 
 
    
 
    $window.on('scroll', function(e){ 
 
    clearTimeout(timeout); 
 
    
 
    timeout = setTimeout(function(){ 
 
     if ($window.scrollTop() < 650) { 
 
     $navbar.removeClass('hide'); 
 
     } else { 
 
     $navbar.addClass('hide'); 
 
     } 
 
    }, 100); 
 
    }); 
 
}());

body{ 
 
    height: 12000px; 
 
} 
 
.navbar{ 
 
    height: 100px; 
 
    width: 800px; 
 
    background-color: green; 
 
    position: fixed; 
 
    
 
    transition: opacity 4s; 
 
    opacity: 1; 
 
} 
 

 
.navbar.hide { 
 
    opacity: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='navbar'></div>

Answer 2

は、あなたはそれが次に

.navbar { 
    display: none; 
} 

それをこのCSSをすべきである与え、デフォルトでは非表示.navbarを持って確認する必要がありますフラッシュなしでスクロール位置に達するとフェードインします。