Question

我试图为我的网站设置一个粘性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>

Answer 1

添加＆＃34;职位：亲属;＆＃34;到.sticker：

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

https://jsfiddle.net/lemoncurry/geoc3rtw/

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

1 个答案: