jquery - Css 转换使我的固定 header 在 Chrome 中跳动。我能做些什么来修复它吗？

Question

我在 atm 上工作的网络布局有一个标题水平菜单，一旦向下滚动，它就会变成固定位置。很简单。

然后我有一个完整的背景图像也有一个固定的位置(它们都在同一位置)，opacity:0; 和一个负的 z-index，并且，当向下滚动时，图像会发生变化，因为它向具有更高 z-index 和 opacity:1;

的容器添加了一个类

此 html 将用作示例:

<div class="header">
    <div class="Menu "> 
    </div>
</div>


<div class="image2 top"> 
</div>
<div class="image1"> 
</div>
<div class="content">

</div>

一些CSS:

.header {
    height:100px;
    width:100%;
    position:relative;
}
.Menu {
    height:40px;
    width:100%;
    background-color: red;
    position:absolute;
    bottom:0;
}
.MenuFixed {
    position:fixed;
    top:0;
}
.content {
    height:1200px;
}
.image1, .image2 {
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    z-index:-10; 
    opacity:0;
    -webkit-transition: opacity .3s ease;
    transition: opacity .3s ease;    
}
.top {
    opacity:1;
    z-index:-9;
}

.image2 {background-color: orange;}
.image1 {background-color: yellow;}

和jquery:

$(window).scroll(function () {            
    if ($(window).scrollTop() > 60) {
        $(".Menu").addClass("MenuFixed");                
    } else {
        $(".Menu").removeClass("MenuFixed");
    }

    if ($(window).scrollTop() > 400) {
        $(".image1").addClass("top");
        $(".image2").addClass("top");
    } else {
        $(".image1").removeClass("top");
    }
});

您可以在这个 JSFIDDLE 中查看结果

问题是我已经为我的图像添加了一个 css 过渡，所以当发生变化时，它会产生类似“淡入淡出”的效果，但是当您在图像变化点上下滚动时，您可以看到标题菜单“弹跳”。 (如果你按下滚动条滚动 fiddle ，你可以更好地检查它)。如果没有过渡，标题不会反弹

谁能告诉我为什么会这样？无论如何要修复它？如果我不能使用 css 转换，有什么方法可以使修改 jquery 的效果类似吗？ (对不起，我不擅长 javascript 和 jquery)

非常感谢，请原谅我糟糕的英语。欢迎任何编辑。

已编辑:由于网络处于早期阶段，我只是在使用 crhome 而不是在其他浏览器上进行测试。我刚刚注意到是一个 chrome 问题/错误(在 IE、Safary 和 Firefox 中完美运行)。仍然赞赏任何“修复”

Answer 1

您根本不必通过 Javascript 处理 z-index。只需使用 0 的 z-index，按所需顺序排列图像并添加一个类以通过 Javascript 更改不透明度。

仅将类添加到应出现的图像中:

$(window).scroll(function () {      
    if ($(window).scrollTop() > 400) {
        $(".image1").addClass("top");
    } else {
        $(".image1").removeClass("top");
    }
});

不要使用负 z-index 并且不要在添加的类中更改 z-index:

.image1, .image2 {
    z-index:0;   
}
.top {
    opacity:1;
}