スクロール時にナビの色を変更するにはどうすればよいですか？

Question

これは私が現在持っているものですが、ご覧の通り（www.lucasdebelder.be）、スクロール後200pxまで隠れてしまいましたが、ちょっと変わってしまいました。 ナビゲーションショーを開始時にスクロールさせて、スクロールして200pxと言うと、色は（背景色と色）に変更されます。私は写真と例で私が欲しいものを実証しようとします。

So this is what it should look like upon entering on the website.

And then if you scroll down it should transform into this.

これは私のjQueryのATMのように見えるものです。

(function($) {   
    $(document).ready(function(){      
     $(window).scroll(function(){       
      if ($(this).scrollTop() > 200) { 
       $('nav').fadeIn(500); 
      } else { 
       $('nav').fadeOut(500); 
      } 
     }); 
    }); 
})(jQuery); 

Answer 1

var size= $(".nav").offset().top; 

     $(document).scroll(function(){ 
      if($(this).scrollTop() > size) 
      { 
       $('.nav').css({"background":"Blue"}); 
      } else { 
       $('.nav').css({"background":"transparent"}); 
      } 
     }); 

Answer 2

この試してみてください。これは、今、このコードを追加することにより、BG-色に色を与える200pxのスクロール

後にNAVでクラス "BG-色" を追加します

$(window).scroll(function(){ 
    if ($(this).scrollTop() > 200) { 
     $('nav').addClass('bg-color'); 
    } else { 
     $('nav').removeClass('bg-color'); 
    } 
}); 

をあなたのCSSファイルに入れてください

.bg-color { 
    background-color:red; 
    -moz-transition: all .2s ease-in; 
    -o-transition: all .2s ease-in; 
    -webkit-transition: all .2s ease-in; 
    transition: all .2s ease-in; 
}