jquery - 滚动时的不透明度变化会影响顶部的 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-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%;
}