首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何将多个div层叠在一起,并在用户滚动每个div时向上移动以显示其后面的div?

如何将多个div层叠在一起,并在用户滚动每个div时向上移动以显示其后面的div?
EN

Stack Overflow用户
提问于 2018-06-01 02:48:15
回答 1查看 93关注 0票数 0

我想要将几个div层叠在一起,当用户滚动顶部的div时,上面的div将向上滚动以显示其后面的div。这是我的意思是:

我知道我需要改变文档的自然流动,所以我很可能需要使用绝对位置,但是我如何才能向上滚动每个div?我尝试在每个带有较低z索引的div上使用绝对定位,但我不知道如何向上滚动每个div。任何关于jQuery/JavaScript库或CSS技巧的指导都是非常有用的,或者是正确的方向。

EN

回答 1

Stack Overflow用户

发布于 2018-06-01 03:48:06

我不确定你到底想要什么效果,但下面的内容可能会对你有所帮助。您可以使用$(window).scroll事件和$(window).scrollTop()函数监听窗口的滚动位置。

代码语言:javascript
复制
$(window).scroll(function (e) {
  var scroll = $(window).scrollTop();

  if (scroll > 120) {
    $(".div-1").slideUp();
  }

  if (scroll > 240) {
    $(".div-2").slideUp();
  }
});
代码语言:javascript
复制
section {
  height: 900px;
}

div {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  width: 10rem;
  height: 900px;
  font-size: 2rem;
}

.div-1 { background: #faa; }
.div-2 { background: #aff; }
.div-3 { background: #ffa; }
代码语言:javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section>
  <div class="div-3">3</div>
  <div class="div-2">2</div>
  <div class="div-1">1</div>
</section>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50630904

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档