ナビゲーションバーフェードイン＆フェードアウトこんにちはスクロールダウンしながら、フェードイン、私のナビゲーションバーを作成する方法についての検索をしていた

Question

をスクロール時とフェードアウトアップをスクロールしながら、素敵な話題を見つけ Fading bootstrap navbar on scrolldown, while changing text color

たくさん私を助けもhttp://jsfiddle.net/f5UTL/

問題は、そのスクロールが表示されている間に消えていないかどうかです。ダイナミックアニメーションがなくても、このプロセス中に私のページを動かしていても、間違いがどこにあるか教えてくれれば幸いです。

<script> 
 
    $(function() { 
 
     var header = $('.opaque'); 
 
     $(window).scroll(function() { 
 

 
      var scroll = $(window).scrollTop(); 
 

 
      if (scroll >= 300) { 
 
       header.removeClass('opaque').addClass('navbar-fixed-top').fadeIn(); 
 
      } else { 
 
       header.removeClass('navbar-fixed-top').fadeOut().addClass('opaque'); 
 
      } 
 
     }); 
 
    }); 
 
< /script> 
 

 

.navbar-fixed-top { 
 
    
 
    background-color: rgba(128,128,128,1); 
 
    transition: background-color all 2s; 
 
    -webkit-transition: background-color all 2s; 
 
    -moz-transition: background-color all 2s; 
 
    -o-transition: background-color all 2s; 
 
    } 
 
.navbar-fixed-top .opaque { 
 
    background-color: rgba(128,128,128,0); 
 
    transition: background-color all 2s ; 
 
    -webkit-transition: background-color all 2s ; 
 
    -moz-transition: background-color all 2s ; 
 
    -o-transition: background-color all 2s ; 
 
    }

Answer 1

ここでは、達成したいものの簡略化されたバージョンです。

$(function() { 
    //caches a jQuery object containing the header element 
    var header = $('#nav'); 
    $(window).scroll(function() { 
     var scroll = $(window).scrollTop(); 
     if (scroll >= header.height()) { 
     header.fadeOut(); 
     } else { 
     header.fadeIn(); 
     } 
    }); 
}); 

お待ちしています。

fiddleを更新しました。