navbar opacity/rgba scroll on scroll

Question

私はトップに透明になるナビゲーションを作成しようとしていましたが、ユーザーがページをスクロールするときに白い色になります。私のヘッダーの高さは800pxで、800pxの後にナビゲーションが100％透明になるようにしたい。 Here`s私のコード：

<header id="header"> 
    <nav class="navbar"> 
     <ul class="navigation"> 
      <li><a href="#header">Home</a></li> 
      <li><a href="">About us</a></li> 
      <li><a href="">Our qualities</a></li> 
      <li><a href="">Contact us</a></li> 
      <li><a href="">contact us</a></li> 
     </ul> 
    </nav> 

nav { 
    width: 1600px; 
    position: fixed; 
    top: 0; 

    ul { 
     margin: 0 auto; 

     li { 
      display: inline-block; 
      padding: 5px 20px; 

      a { 
       font-family: $f1; 
       font-size: 16pt; 
       color: $c3; 
      } 
     } 
    } 
} 
} 

まず私は不透明で試してみましたが、それはうまくいきませんでした、とその子要素（ulとli）の上にも0の不透明度を持っていました。そのため Here`s JS：

jQuery(document).ready(function() {   
    var navOffset = jQuery("nav").offset().top; 

    jQuery(window).scroll(function() { 
     var scrollPos = jQuery(window).scrollTop(); 
     var navOpacity = scrollPos /800; 
     jQuery('.navbar').css(opacity, 'navOpacity'); 

     if (jQuery('nav').css('opacity') < 1) { 
      jQuery('.navigation').css('opacity', '1') 
     }; 

は、その後、私は 代わりの

jQuery('.navbar').css(opacity, 'navOpacity'); 

いずれも動作しませんでしたこと、スクロールにRGBA値を変更しようとした私は

jQuery('.navbar').css(backgroundcolor, 'rgba (255, 255, 255, + "navOpacity")'); 

を使用しました

それも失敗したので、私もあなたに助けを求めなければなりません。

Answer 1

あなたはhav e opacityは文字列ではありませんが、変数navOpacityはstringになりました。それは間違っていた。他のすべては一般的にうまくいっています。 :)

// change 
$('.navbar').css(opacity, "navOpacity"); 

// to 
$('.navbar').css("opacity", navOpacity); 

Working example.

Answer 2

あなたのコード内の問題があなたの代わりに変数自体のcss()に文字列としてnavOpacityを提供しているということです。これを試してみてください：

$('.navbar').css('opacity', navOpacity); 

はまた、あなたの現在のロジックは、あなたがあなたの目標として記述するものに後ろ向きであることに注意してください（ヘッダは透明で始まり、800ピクセルで不透明になる）とロジックは、多くのことを簡素化することができます。

$(window).scroll(function() { 
    var pc = $(this).scrollTop()/800; 
    $('.navbar').css('opacity', 1 - pc); 
}); 

Working example

Answer 3

代わりにあなたはjqueryのメソッド.fadeTo()の代わりcss('opacity')を使用することもできます。これを試してみてください。このメソッドは、要素の不透明度をスムーズにアニメーション化します。使用するのが簡単で、アニメーションはインスタント不透明度の変更に比べてかなり見やすいです。

jQuery('.navbar').fadeTo("slow" , navOpacity); 

if (jQuery('nav').css('opacity') < 1) { 
    jQuery('.navigation').fadeTo("slow" , 1); 
};