Javascript 粘性卷轴上两个固定div的叠加_Javascript_Css

Javascript 粘性卷轴上两个固定div的叠加

javascript css

Javascript 粘性卷轴上两个固定div的叠加,javascript,css,Javascript,Css,我正在尝试为我的网站创建一个粘性div。我希望它通过一个固定的图像，然后被固定在这个固定图像的顶部，然后后面的内容将通过粘性div。我几乎成功地做到了这一切，除了粘滞的div在固定图像下面通过。我找不到问题出在哪里，我想问题并不复杂，但我的极限不是很高。无论如何谢谢你代码如下： <html> <head> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

我正在尝试为我的网站创建一个粘性div。我希望它通过一个固定的图像，然后被固定在这个固定图像的顶部，然后后面的内容将通过粘性div。我几乎成功地做到了这一切，除了粘滞的div在固定图像下面通过。我找不到问题出在哪里，我想问题并不复杂，但我的极限不是很高。无论如何谢谢你

代码如下：

<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" language="javascript">
$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    if (scroll >= 309) {
        $(".sticker").addClass("fixed");
    } else {
        $(".sticker").removeClass("fixed");
    }
});
</script>
<style>
.sticker {
height:80px;
padding-left:50px;
margin-left: 242px;
width:800px;
background:red;
display:block;
z-index:2;
}

.fixed {
position:fixed;
top:50px;

}

.top {
height:350px;
width:800px;
}

.img-fix {
    position: fixed;
    left: 250px;
    top: 50px;
    width: 800px;
    height:300px;
    background-color:blue;
    z-index:1;
}

.container {
    background-color:green; 
    padding-right:60px; 
    padding-left:60px; 
    width:800px; 
    height:800px; 
    position: absolute; 
    left: 200px; 
    top:445px; 
    z-index:3;}
</style>

</head>

<body>
<div class="img-fix"></div>
<div class="top"></div>
<div class="sticker"></div>

<div class="container">
</div>


</body>
</html>

添加位置：相对位置；至.贴纸：

.sticker {
    position: relative;
    // the rest of your CSS