如何使用Javascript堆叠粘性标题？

关于这个问题已经有一些问题了，但我还没有找到一个好的解决办法

我试图创建一个长的滚动页面，当到达视口的顶部时，标题（也是导航）是粘性的，彼此堆叠在一起

我会尽力表现出来的<代码>------用于视口边界

初始状态：

---------------
A


---------------

向下滚动：

---------------
A

B
---------------

把它叠起来：

---------------
A
B

---------------

理想情况下，视口已满时，放弃堆叠：

---------------
D
E
F
---------------

这将是引导网格的左列。右边是正在滚动的相关内容

我想要避免的是为每个堆叠的项目指定一个像素距离（从视口顶部），它应该是可调整大小和流动的

有简单的解决办法吗？这完全可行吗？

---

如果你觉得没有任何意义，也请发帖子。

我已经看过了位置：粘性和几次多边形填充，但还没有进一步的效果。你会想检测元素何时接近页面末尾，一旦接近，你就会定位并修复它。进行计算时，需要将堆叠图元的高度添加到计算中