Javascript 页面中的几个粘性标题

我有如下内容

JSfiddle

显示：

我的页面的布局也很相似，页面的左半部分有其他内容，这不在本问题的范围之内，而右半部分显示的内容与上面的JSFiddle相同

我有几个

Wrapper

div一个接一个。每个

Wrapper

div将包含n个

Details

div，每个

Details

div由2个div组成<代码>标题和实际内容

如果

Wrapper

中的

Details

div数大于页面高度，向下滚动时，

Wrapper标题将隐藏

如何使
包装标题
在
包装
结束前保持粘性。一旦一个
包装
被交叉，下一个
包装
的
包装标题
就应该变粘

请看：看看我在说什么。我想要一些类似的东西，但是我有几个
包装器
一个接一个地具有不同的
包装器标题
，每个包装器在
包装器
的范围内都应该是粘性的


.wrapper{
边框：1px纯蓝色；
边缘底部：15px；
}
.wrapperTitle{
字体大小：1.2米；
字体大小：粗体；
背景颜色：灰色；
填充：10px；
边缘底部：5px；
}
.detailDiv{
边框：1px纯红；
左边距：7px；
边缘底部：5px；
右边距：2px；
}
.详细名称{
字号：1em；
字体大小：粗体；
背景颜色：粉红色；
填充：10px；
边缘底部：5px；
}
.详情{
边缘底部：5px；
左边距：5px；
}

包装标题1
细节部
Lorem ipsum dolor sit amet，是一位杰出的献身者。Nam tincidunt turpis非tincidunt前庭。马莱苏阿达的射手座狮子座。在塞姆佩尔·利奥·达皮布斯维尔，最大权杖悬钩子。libero ultricies的Nam efficitur dui，posuere fermentum velit fringilla。在faucibus中，Interdum和malesuada在第一次同侧前就出名了。无便利。努克的拉奥里特门附近有一座新的教堂。Mauris laoreet ultrices酵母菌。不要把老鼠放在车上。埃蒂安在拉齐尼亚莫里斯的菲尼布斯码头。毛里斯·诺奥纳雷·马萨。
细节部
Lorem ipsum dolor sit amet，是一位杰出的献身者。Nam tincidunt turpis非tincidunt前庭。马莱苏阿达的射手座狮子座。在塞姆佩尔·利奥·达皮布斯维尔，最大权杖悬钩子。libero ultricies的Nam efficitur dui，posuere fermentum velit fringilla。在faucibus中，Interdum和malesuada在第一次同侧前就出名了。无便利。努克的拉奥里特门附近有一座新的教堂。Mauris laoreet ultrices酵母菌。不要把老鼠放在车上。埃蒂安在拉齐尼亚莫里斯的菲尼布斯码头。毛里斯·诺奥纳雷·马萨。
包装标题2
细节部
Lorem ipsum dolor sit amet，是一位杰出的献身者。Nam tincidunt turpis非tincidunt前庭。马莱苏阿达的射手座狮子座。在塞姆佩尔·利奥·达皮布斯维尔，最大权杖悬钩子。libero ultricies的Nam efficitur dui，posuere fermentum velit fringilla。在faucibus中，Interdum和malesuada在第一次同侧前就出名了。无便利。努克的拉奥里特门附近有一座新的教堂。Mauris laoreet ultrices酵母菌。不要把老鼠放在车上。埃蒂安在拉齐尼亚莫里斯的菲尼布斯码头。毛里斯·诺奥纳雷·马萨。
细节部
Lorem ipsum dolor sit amet，是一位杰出的献身者。Nam tincidunt turpis非tincidunt前庭。马莱苏阿达的射手座狮子座。在塞姆佩尔·利奥·达皮布斯维尔，最大权杖悬钩子。libero ultricies的Nam efficitur dui，posuere fermentum velit fringilla。在faucibus中，Interdum和malesuada在第一次同侧前就出名了。无便利。努克的拉奥里特门附近有一座新的教堂。Mauris laoreet ultrices酵母菌。不要把老鼠放在车上。埃蒂安在拉齐尼亚莫里斯的菲尼布斯码头。毛里斯·诺奥纳雷·马萨。
细节部
Lorem ipsum dolor sit amet，是一位杰出的献身者。Nam tincidunt turpis非tincidunt前庭。马莱苏阿达的射手座狮子座。在塞姆佩尔·利奥·达皮布斯维尔，最大权杖悬钩子。libero ultricies的Nam efficitur dui，posuere fermentum velit fringilla。在faucibus中，Interdum和malesuada在第一次同侧前就出名了。无便利。努克的拉奥里特门附近有一座新的教堂。Mauris laoreet ultrices酵母菌。不要把老鼠放在车上。埃蒂安在拉齐尼亚莫里斯的菲尼布斯码头。毛里斯·诺奥纳雷·马萨。
细节部
Lorem ipsum dolor sit amet，是一位杰出的献身者。Nam tincidunt turpis非tincidunt前庭。马莱苏阿达的射手座狮子座。在塞姆佩尔·利奥·达皮布斯维尔，最大权杖悬钩子。libero ultricies的Nam efficitur dui，posuere fermentum velit fringilla。在faucibus中，Interdum和malesuada在第一次同侧前就出名了。无便利。努克的拉奥里特门附近有一座新的教堂。Mauris laoreet ultrices酵母菌。不要把老鼠放在车上。埃蒂安在拉齐尼亚莫里斯的菲尼布斯码头。毛里斯·诺奥纳雷·马萨。
细节部
Lorem ipsum dolor sit amet，是一位杰出的献身者。Nam tincidunt turpis非tincidunt前庭。马莱苏阿达的射手座狮子座。在塞姆佩尔·利奥·达皮布斯维尔，最大权杖悬钩子。libero ultricies的Nam efficitur dui，posuere fermentum velit fringilla。在faucibus中，Interdum和malesuada在第一次同侧前就出名了。无便利。努克的拉奥里特门附近有一座新的教堂。Mauris laoreet ultrices酵母菌。多奈克·普莱斯特拉特·厄罗斯v
.wrapperTitle {
  font-size: 1.2em;
  font-weight: bold;
  background-color: grey;
  padding: 10px;
  margin-bottom: 5px;
  position: sticky;
  top: 0;
}

<div id="wrapperDivTitle1" class="wrapperTitle">
    Wrapper Title 1
</div>

.sticky {
   position: fixed;
   top: 0;
   width: 100%;
}

window.onscroll = function() {myFunction()};

var headers = [1,2,3,4,5].map(i => {        
    let element = document.getElementById("wrapperDivTitle" + i);     
    return {
        element: element,
        sticky: element.offsetTop
    }
});

function myFunction() {
     headers.forEach(item => {
         if (window.pageYOffset > item.sticky) {
             item.element.classList.add("sticky");
         } else { 
             item.element.classList.remove("sticky");
         }
     });
}