Непрозрачность изменения на прокрутке влияет на 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%; 
}