當用戶向下滾動頁面時增加元素不透明度

Question

我看到很多與修改元素不透明度有關的問題，當用戶滾動但沒有找到能夠幫助我按需要的方式時。我嘗試過幾種配方，並且無法達到我想要的效果。

我有一個帶有BG圖像的標題，裏面有一個div，我用它作爲覆蓋層，我希望它在使用者向下滾動時變得更暗和更平滑（不透明度增加）。

編輯： 所需的效果是：

不透明度是通過默認在CSS設置爲0.2。當用戶開始向下滾動時，它將從0.2開始增加到1.當用戶再次滾動時，它將從1（或任何值）減小到0.2。

小提琴：https://jsfiddle.net/z7q2qtc6/

<div class='nice-header'> 
    <div class='header-overlay'></div> 
</div> 

CSS

.nice-header { 
    position: relative; 
    height: 300px; 
    background: center center; 
    background-size: cover; 
    background-image: url(http://www.boeing.com/resources/boeingdotcom/commercial/787/assets/images/marquee-787.jpg); 
} 

.header-overlay { 
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    background: rgb(0,0,0); 
    opacity: 0.2; 
} 

JS

$(window).scroll(function() { 
    $('.header-overlay').css({ 
    opacity: function() { 
     var opacity = 0; 
     //TODO: 
     //Set opacity to a higer value whilst user scrolls 
     return opacity; 
    } 
    }); 
}); 

Answer 1

您可以使用.scrollTop() method來檢索當前的滾動位置。

要計算不透明度，請從元素高度中減去scrollTop值，然後除以元素的高度。

Example Here

$(window).scroll(function() { 
    var scrollTop = $(this).scrollTop(); 

    $('.header-overlay').css({ 
    opacity: function() { 
     var elementHeight = $(this).height(); 
     return 1 - (elementHeight - scrollTop)/elementHeight; 
    } 
    }); 
}); 

如果你想佔元素的0.2初始不透明度：

Updated Example

$('.header-overlay').css({ 
    opacity: function() { 
    var elementHeight = $(this).height(), 
     opacity = ((1 - (elementHeight - scrollTop)/elementHeight) * 0.8) + 0.2; 

    return opacity; 
    } 
}); 

Answer 2

使用，RGBA，而不是RBG和改變alpha值當用戶滾動。我顯然不是100％確定你要做什麼，但在大多數情況下，使用rgba比使用rgb和不透明度更好。

What are differences between RGB vs RGBA other than 'opacity'

這裏是鏈接到另一個職位，說明這一點在進一步的細節。