在同一父级中滚动多个粘性元素

Question

我试图弄清楚粘性位置在同一个div中如何与三个元素一起工作。我的问题是该合成仅在滚动的底部和滚动过程中起作用，而在顶部不起作用。我如何才能使块从滚动和底部开始时的相同构图开始？

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

• 高度为100像素的白色
• 25像素间距
• 绿色，高度为40px
• 0px间隙
• 红色，高度为30px

#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>

谢谢您的帮助！

Answer 1

解决方案是粘贴#main而不是单独的div，因此它们表现为块！