Хочу сделать скролинг страницы, первый frame «уезжает» вверх, а второй встает на top 0
, а вот третий не получается.
Как это исправить?
var $document = $(document),
$element1 = $('.frame-1'),
$element2 = $('.frame-2'),
$element3 = $('.frame-3');
$(window).scroll(function() {
if ($(this).scrollTop() >= 1) {
$element1.css("top", "-962px");
$element2.css("top", "0px");
$element3.css("top", "962px");
} else if ($(this).scrollTop() >= 962) {
$element1.css("top", "-1924px");
$element2.css("top", "-962px");
$element3.css("top", "0px");
} else {
$element1.css("top", "0px");
$element2.css("top", "962px");
$element3.css("top", "1924px");
}
});
.wrapper {
position: relative;
height: 400px;
}
.frame-1 {
top: 0px;
background: #c5d8c5;
width: 100%;
height: 962px;
transition: all 3s ease;
}
.frame-2 {
width: 100%;
top: 962px;
background: #99ff99;
height: 962px;
position: absolute;
transition: all 3s ease;
}
.frame-3 {
width: 100%;
top: 1924px;
background: #ff0000;
height: 962px;
position: absolute;
transition: all 3s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="frame-1">
<!-- Content here -->
</div>
<div class="frame-2">
<!-- Content here -->
</div>
<div class="frame-3">
<!-- Content here -->
</div>
</div>