JavaScriptを正しく動作させるにはどうすればいいですか？

Question

私が使用しているJavaScriptにはいくつか問題があります。

アイデアは、私のメニューの背景を白いリンクで透明にします。次に、スクロールして100と言うと、背景が透明から白に変わると、テキストリンクは白から＃222に変わり、テキストリンク上のホバー状態は白に戻って変化します。

//Fade in header 
jQuery(window).on("scroll", function() { 
if (jQuery(this).scrollTop() > 100) { 
    jQuery("body.home header, body.page header").css("background-color","#fff"); 
     jQuery("body.home header, body.page header").css("box-shadow","0px 2px 4px -2px rgba(0, 0, 0, 0.15)"); 
     jQuery("body.home header, body.page header").css("transition","1s"); 
      jQuery(".nav-menu ul li a").css("color","#222"); 
      jQuery(".nav-menu ul li a:hover").css("color","#fff"); 
} 

else { 
    jQuery("body.home header, body.page header").css("background-color","transparent"); 
    jQuery("body.home .nav-menu ul li a, body.page .nav-menu ul li a").css("color","#fff"); 

      jQuery("body.home header, body.page header").css("box-shadow","none"); 


} 
}); 

期待どおりに機能しません。

まず、何らかの形のスクロールイベントが発生するまで、白い背景が見えます。次に、それは透明に変化し、その後再び100に戻ります。

第2の問題は、白い背景が白い変化した状態で、ホバーの色が変化していないことです。

my blogで効果が見られない場合は、説明しようと反対にリンクする方が簡単です。

Answer 1

これはあまり働かないコードです。スクロールにクラスを追加するだけで、ずっと簡単になります。

など。 @GavinThomasが言ったように

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

    }); 

.white { 
background:#fff; 
} 
.white a { 
color:#222; 
} 

Answer 2

は、あなたが本当に「透明」状態を設定するCSSクラスを使用して、唯一のクラスのオン/オフを切り替えるにはjQueryを使用する必要があります。

つまり、クラスwhiteが背景を白くし、デフォルトでヘッダーが透明であるとします。これがCSSの外観です。もちろん、すでに持っているスタイルをすべて追加する必要があります。

header { 
    background-color: transparent; 
    transition: 1s; 
} 

.nav-menu ul li a, body.page .nav-menu ul li a { 
    color: #fff; 
} 

header.white { 
    background-color: #fff; 
    box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.15); 
} 

header.white .nav-menu ul li a{ 
    color: #222; 
} 

header.white .nav-menu ul li a:hover { 
    color: #fff; 
} 

そして@GavinThomasが

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

});