时间戳

首页 > 解决方案 > 在同一个父级中使用多个粘性元素滚动

css - 在同一个父级中使用多个粘性元素滚动

问题描述

我试图弄清楚粘性位置如何与同一个 div 中的三个元素一起工作。我的问题是构图仅在滚动的底部和滚动期间有效，但在顶部无效。如何让块在滚动和底部时从相同的组合开始？

这个想法是三个元素的块总是具有以下组合并在父 div #main 中一起移动：

#main {
    background: #ccc;
    height: 1000px;
    padding:100px;
}
#one,#two,#three {
  position:sticky;

}
#one{
  height: 100px;
  background: white;
  top:150px;
  margin-bottom: 95px;
  /*padding-bottom: 115px;
  margin-top:-150px;*/
  
}

#two{
  height:40px;
  background: green;
  top:275px;
  margin-bottom: 30px;
  /*padding-bottom: 50px;
  margin-top:-275px;*/
}

#three{
  height:30px;
  background: red;
  top:315px;
  
  /*padding-bottom: 20px;
  margin-top:-315px; */
}

#main-after, #main-before {
  background: black;
  height: 500px;
}
<div id="main-before">
</div>
<div id="main">
  <div id="one">one</div>
  <div id="two">two</div>
  <div id="three">three</div>
</div>
<div id="main-after">
</div>

谢谢您的帮助！

标签： cssscrollsticky

解决方案

The solution is to sticky the #main and not the separate divs, so they behave as a block!

推荐阅读