ページをスクロールすると、この背景が不透明にならないようにするにはどうすればよいですか？

Question

JQueryの新機能は、文字通り、何かがクリックされたときにdivをフェードインまたはフェードインさせることです。とにかく、画面が下にスクロールするにつれて、この背景をあまり不透明にする手助けをすることができるかどうか疑問に思っていました。これまでのところ、画面が50px以上になると背景が表示されるようになりましたが、ゆっくりと不透明になるように（ゆっくりと表示されるように）したいと考えています。ご協力いただきありがとうございます！ ：P

人々は私と同じ質問があります言っている、それは似ていますが、なぜ、ここで同じではないです：私はCSSセレクタ「RGBA（0、0、0、0.0）」最後の値を必要とする

徐々に増加し、それがここ1への道（例だ作る必要があります： "RGBA（0、0、0、1"）ダウンページがスクロールとしてこれは不透明度

jQueryを使って行うことをNOTHNGされています。

$(document).ready(function() { 

$(document).scroll(function() { 
    var y = $(this).scrollTop(); 
    if (y > 100) { 
    $(".top-nav-container").css({"background-color": "rgba(0, 0, 0, 0.1"}); 
    } else { 
    $(".top-nav-container").css({"background-color": "rgba(0, 0, 0, 0.0"}); 
    } 
    }); 
}); 

Answer 1

スクロールトップの高さの商と窓の高さに基づいて不透明度を計算します。スクロールして[jqueryの/ Javascriptの不透明度アニメーションの

$(document).scroll(function() { 

    var wh = $(window).height(); 
    var y = $(this).scrollTop(); 

    var thisOpacity = 1 - (y/wh);  

    $(".top-nav-container").css({"background-color": "rgba(0, 0, 0, " + thisOpacity + ")"}); 

}); 

Answer 2

あなたが遅延時間と方法でフェードを使用することができます

$(".top-nav-container").fadeIn(1000);