0
Я пытаюсь иметь липкий div для моего сайта.
Я бы хотел, чтобы он проходил фиксированное изображение, а затем фиксировался на вершине этого фиксированного изображения, затем содержимое, которое после этого пропустило бы мимо липкого 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>