我想创建以下滚动效果
滚动时:
当第一个DIV(.section one)滚动到其容器的顶部时,
它变为固定的。当第二个分区(第二节)
滚动到覆盖前一个分区的同一容器的顶部,并变为固定。
第二节封面第一节第三节封面第二节等等
有点像卡片效应。我对怎么做有个想法。
但我还不太明白。
我也愿意使用纯JavaScript
我想提一下。这不是视差滚动,在滚动时背景内容(即图像)以与前景内容不同的速度移动。
这是前景层与固定层重叠
.fixed {
left: 0;
position: fixed;
right: 0;
z-index: 0;
}
.section-one, section-two .section-three {
height: 100vh;
}
.scroll-contain {
overflow-y: hidden;
}
function sticktothetop() {
var element_top = $('.scroll-contain').scrollTop();
var top = $('#top-of-element').offset().top;
if (element_top > top) {
$('.section-one').addClass('fixed');
$('#top-of-element').height($('.section-one').outerHeight());
} else {
$('.section-one').removeClass('fixed');
$('.section-one').height(0);
}
}
$(function() {
$(window).scroll(sticktothetop);
sticktothetop();
});
<div class="scroll-contain">
<div id="top-of-element"></div>
<section class="section-one" style="background-color: yellow">
<div class="card">
<p>
Tempor commodo ullamcorper a lacus vestibulum sed arcu non. Auctor elit sed vulputate mi sit amet mauris commodo quis. Tortor aliquam nulla facilisi cras fermentum odio eu feugiat pretium. Sagittis orci a scelerisque purus semper eget.
</p>
</div>
</section>
<section class="section-two" style="background-color: pink">
<div class="card">
<p>
Tempor commodo ullamcorper a lacus vestibulum sed arcu non. Auctor elit sed vulputate mi sit amet mauris commodo quis. Tortor aliquam nulla facilisi cras fermentum odio eu feugiat pretium. Sagittis orci a scelerisque purus semper eget.
</p>
</div>
</section>
<section class="section-three" style="background-color: orange">
<div class="card">
<p>
Tempor commodo ullamcorper a lacus vestibulum sed arcu non. Auctor elit sed vulputate mi sit amet mauris commodo quis. Tortor aliquam nulla facilisi cras fermentum odio eu feugiat pretium. Sagittis orci a scelerisque purus semper eget.
</p>
</div>
</section>
</div>