滚动时的不透明度变化会影响顶部的div

Question

我试图让一个图像在向下滚动页面时淡出，并使用了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从图像上移开来修复它，但设计师很想让它看起来像这样。

Answer 1

使用z索引；您还需要重置位置（任何值，但静态）

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