[英]Is there a way to overlap a fixed div on scroll using jQuery and CSS?
I would like to create the following scrolling effect我想创建以下滚动效果
While scrolling: When the first div (.section-one) scrolls to the top of its container, it becomes fixed.滚动时:当第一个 div (.section-one) 滚动到其容器的顶部时,它变得固定。 When the second div (.section-two) scrolls to the top of the same container it covers the previous div and becomes fixed.
当第二个 div (.section-two) 滚动到同一个容器的顶部时,它会覆盖前一个 div 并变得固定。
.section-two covers .section-one, section-three covers section-two and so on Kind of like a card effect. .section-two 覆盖 .section-one,section-3 覆盖 section-2 等等 有点像卡片效果。 I have an idea of how to do it.
我知道该怎么做。 But I'm not quite there yet.
但我还没有到那里。
I am also open to using plain JavaScript as well我也愿意使用纯 JavaScript
I would like to mention.我想提一下。 This is not Parallax scrolling where the background content (ie an image) is moved at a different speed than the foreground content while scrolling.
这不是视差滚动,其中背景内容(即图像)在滚动时以与前景内容不同的速度移动。
This is the foreground layer overlapping a fixed layer这是与固定层重叠的前景层
.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>
if i'm not mistaken, you are looking for somewhat of a position: sticky
effect.如果我没记错的话,您正在寻找某种
position: sticky
效果。
try this, and see if it matches your request (no JS required):试试这个,看看它是否符合你的要求(不需要 JS):
.section-one, section-two .section-three {
position: sticky;
top: 0;
}
Would also recommend looking up more info about position: sticky
, and how you could apply it to your needs.还建议查找有关
position: sticky
更多信息,以及如何将其应用于您的需求。
I'm not 100% sure if you search for a "how I do it my own"-solution or a "how do i do it" solution.我不是 100% 确定您是搜索“我自己怎么做”的解决方案或“我怎么做”的解决方案。
how do i do it我该怎么做
Is this what you're looking for?这是你要找的吗? http://scrollmagic.io/examples/advanced/parallax_sections.html If so you could use Scrollmagic: http://scrollmagic.io/
http://scrollmagic.io/examples/advanced/parallax_sections.html如果是这样,您可以使用 Scrollmagic: http ://scrollmagic.io/
how I do it my own我怎么做我自己的
If you just want to learn how to do this your own, "Parallax" is what you can search for (Google or Stackoverflow, there are unlimited answers).如果你只是想学习如何自己做,“视差”就是你可以搜索的(谷歌或 Stackoverflow,有无限的答案)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.