在同一个父项中使用多个粘性元素滚动

Question

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

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

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

#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，因此它们的行为就像一个块！