我有一個着陸頁,由三個框架組成,這些框架始終佔用視口高度和寬度的100%。 我需要在各個框架之間進行轉換,如「PowerPoint演示文稿」等。用戶滾動的框架1在視口上方向上滑動,而框架-2從視口底部向上滑動。我在javascript/jquery中幾乎沒有任何經驗。有一些想法,你可以在代碼中看到,但這個想法不起作用。如何進行垂直「滑動」滾動?
HTML:
<div class="wrapper" id="wrapper">
<div class="frame frame-1">
<!-- Content here -->
</div>
<div class="frame frame-2">
<!-- Content here -->
</div>
<div class="frame frame-3">
<!-- Content here -->
</div>
</div>
CSS:
.wrapper {
height: 300vh;
}
.frame {
position: fixed;
height: 100vh;
transition: all 1s ease;
}
.frame-1 {
top: 0vh;
}
.frame-2 {
top: 100vh;
}
.frame-3 {
top: 200vh;
}
JS:
var $document = $(document),
$element1 = $('.frame-1'),
$element2 = $('.frame-2'),
$element3 = $('.frame-3');
$(window).scroll(function() {
if ($(this).scrollTop() >= 50) {
$element1.css("top", "-100vh");
$element2.css("top", "0vh");
$element3.css("top", "100vh");
} else if ($(this).scrollTop() >= 100) {
$element1.css("top", "-200vh");
$element2.css("top", "-100vh");
$element3.css("top", "0vh");
} else {
$element1.css("top", "0vh");
$element2.css("top", "100vh");
$element3.css("top", "200vh");
}
});