jqueryでヘッダーのロゴを切り替えてクラスを追加/削除しようとしています

Question

基本的には、スクロールダウンを開始するときに透明から背景になるヘッダーがあります。これは、スクロールを開始するときにクラスのヘッダー固定を追加します。ヘッダーが固定であるか、そうでない場合、2つのロゴを切り替えるようにしています。ここでは、今、私は仕事に行くことができないことを私が持っているjQueryのです：

$(document).ready(function() { 
     if($('#masthead').hasClass('header-fixed')) { 
      $('.bdanzer-fixed').addClass('bdanzer-show'); 
     } else { 
      $('.bdanzer-fixed').removeClass('bdanzer-show'); 
     } 
    }); 

編集、追加HTML：

<img class="bdanzer-normal" src="https://dummytext"> 
       <img class="bdanzer-fixed" src="https://dummytext"> 

Answer 1

$(document).ready()は一度だけDOMの準備ができた後に呼び出されます。

​​

をしかし、それは1つのクラスを追加して、このクラスを探して、別の要素に別のクラスを追加するためにscrollを処理するために、一つの場所にscrollを処理するためによくないです：あなただけreadyの代わりにscrollイベントを処理する必要があります。スクロールに必要なすべての処理を行い、必要なすべてのクラスを追加/削除するハンドラを1つだけ持つことをお勧めします。

Answer 2

もtoggleClass機能を使用して簡単にすることでした：

$(document).on('scroll', function(){ 
    var hasClass = $('#masthead').hasClass('header-fixed')); 
     $('.bdanzer-fixed').toggleClass('bdanzer-show', hasClass); 
});