當頁面向下滾動時，如何讓背景變得更加不透明？

我是JQuery的新手，我所能做的就是讓一個div淡入淡出，如果點擊了某個東西，以及您將在下面看到的JQuery。無論如何，我只是想知道是否有人可以幫助我使這個背景更不透明，因爲屏幕向下滾動。到目前爲止，我已經設法使它在屏幕大於或等於50px時出現背景，但我希望能夠使它慢慢變得不透明（慢慢出現）。謝謝你的幫助！：P當頁面向下滾動時，如何讓背景變得更加不透明？

人們都在說有一個問題，我的一樣，它是相似但不相同的原因是：

我需要的CSS選擇「RGBA（0，0，0，0.0）」的最後一個值需要慢慢增加，使它的方式爲1（這裏的例子：「RGBA（0，0，0，1」）作爲頁面向下滾動THIS IS NOTHNG與不透明度DO

JQuery的：

$(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"}); 
    } 
    }); 
});

來源

2016-09-22 Sonnie Thomas

[jQuery的/ JavaScript的不透明度動畫與滾動的可能的複製]（http://stackoverflow.com/questions/8702329/jquery-javascript-opacity-animation-with-scroll） – empiric

讀我的代碼它不同也許幾乎相同的問題，但JQuery代碼是完全不同的。 –

但它應該給你一個關於如何解決它的想法 – empiric

基於滾動頂高的商和窗口高度計算不透明度：

$(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 + ")"}); 

});

來源

2016-09-22 20:29:38

感謝您的時間，但我不能使用不透明的看法，因爲它將永遠不會影響到上面的文本是不會有任何影響我可以在這個CSS選擇器「rgba（0，0，0，0.0）」中添加多個sof 0.01到最後一個值？ –

嗯，它似乎並沒有工作，最後「沒有一個合作伙伴，如果這是有道理的：/ –

您可以在方法使用淡入與延遲時間

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

來源

2016-09-22 20:31:12 vickisys

我看到你來自哪裏，但然後我的全部div將消失，並重新出現在我只是尋找受影響的背景：P –

當頁面向下滾動時，如何讓背景變得更加不透明？

回答

相關問題