滚动上的不透明度更改会影响顶部的 div答案

【问题标题】：Opacity change on scroll affects div over top滚动上的不透明度更改会影响顶部的 div
【发布时间】：2016-05-06 19:12:40
【问题描述】：

我试图让图像在向下滚动页面时淡出并使用 js 来完成，但它对图像顶部上方的 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 从图像上移开来修复它，但设计师热衷于让它看起来像这样。

【问题讨论】：

你正在使容器不透明，这也会影响包装元素的所有子元素。
尝试在你的js中改变背景颜色，并使用rgba，这样，它只会影响目标元素，而不是像背景颜色这样的孩子：rgba(0,0,0,0 );
但它不是子元素，它是它下面的一个单独的 div。我刚刚以负上边距移动它。

标签： jquery css

【解决方案1】：

使用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%;
}

【讨论】：