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;

}

有关导致此问题的原因的任何想法？显然我可以通过移动图像来修复它，但设计师希望看起来像这样。

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

滚动时的不透明度更改会影响顶部的div

1 个答案: