Question

我正在处理的网页布局有一个标题水平菜单，一旦向下滚动就会变成固定位置。这很简单。

然后我有完整的背景图像，也有一个固定的位置（所有这些位置相同），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过渡，所以当发生变化时，它会产生类似“淡入淡出”的效果，但是当你在图像变换点上下滚动时，你可以看到标题菜单“弹跳”。（如果滚动小提琴按滚动条，可以更好地检查它）。如果没有过渡，则标题不会反弹

有人能告诉我为什么会这样吗？无论如何要解决它？如果我不能使用css过渡，有没有办法使jmery的simmilar效果修改？（对不起，我对javascript和jquery感到厌烦）

非常感谢，请原谅我糟糕的英语。任何编辑都会得到很好的解释。

编辑：由于网络处于早期阶段，我只是使用crhome而不是在其他浏览器上进行测试。我刚刚注意到是一个chrome问题/ bug（在IE，Safary和Firefox中都很完美）。仍有任何“修复”是apreciated

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

Answer 2

好吧，几个小时后，我找到了解决这个问题的方法。我回答了我自己的问题，以防将来可以帮助其他人。

chrome的问题/错误是当前背景图像的负z-index值。不知道为什么它会消耗铬，但是一旦我输入了可见图像的负值，它就会停止弹跳。

所以我在标题中添加了一个大的z-index（假设总是在顶部）：

.header {
    height:100px;
    width:100%;
    position:relative;
    z-index:100;
}

将图像z-index更改为-1（如果隐藏）和0（如果可见）

更新了 FIDDLE

Css过渡使我的固定标题在Chrome中反弹。我能做些什么来解决它吗？

2 个答案: