不透明度在滾動上的變化影響div頂部

我試圖讓圖像淡入向下滾動頁面，並使用js來做到這一點，但它對圖像頂部的div有奇怪的影響（負邊際）。不透明度在滾動上的變化影響div頂部

這是網頁：http://wwwjoneshall.wpengine.com/project/west-hollywood-library/

要看到它，你要看看大屏幕上，因爲它有點彈出就像你開始滾動，去相當透明。頂部的灰色div不應該改變不透明度。

這對於圖像旗幟褪色的JS：

var fadeStart=100 
    ,fadeUntil=600 
    ,fading = jQuery('.project-banner') 
; 

jQuery(window).bind('scroll', function(){ 
    var offset = jQuery(document).scrollTop() 
     ,opacity=0 
    ; 
    if(offset<=fadeStart){ 
     opacity=1; 
    }else if(offset<=fadeUntil){ 
     opacity=1-offset/fadeUntil; 
    } 
    fading.css('opacity',opacity); 
});

CSS

.grey-overlay { 
    padding: 20px; 
    background-color: #eaeaea; 
    z-index: 9999; 
    margin: -130px 3% 0 3%; 
} 
.project-banner { 
    height: 1015px; 
    width: 100%; 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-size: cover; 
    opacity: 1; 
    z-index: 1;

}

上是什麼導致這個問題有什麼想法？顯然，我可以通過將div從圖像中移除來解決問題，但設計師非常希望以這種方式呈現。

來源

2016-05-06 HannahC

你使容器不透明，這也將影響纏繞元件的所有兒童。 – Aaron

嘗試改變你的js中的背景顏色，並使用rgba，這樣，它只會影響目標元素，而不是像背景顏色那樣的子元素：rgba（0,0,0,0）; –

但它不是一個子元素，它是它下面的一個單獨的div。我剛剛用負頂部邊距移動了它。 – HannahC

使用z-index;你需要重新設置位置也（任意值，但靜態）

https://www.w3.org/wiki/CSS/Properties/z-index

.grey-overlay { 
    padding: 20px; 
    background-color: #eaeaea; 
position:relative;/* here z-index comes avalaible */ 
    z-index: 9999; 
    margin: -130px 3% 0 3%; 
}

來源

2016-05-06 10:17:16

謝謝！這解決了它。 – HannahC

不透明度在滾動上的變化影響div頂部

回答

相關問題