如何实现在滚动上替换前一个的复杂粘性部分标题？答案

【问题标题】：How to implement complex-sticky section headers that replace the previous one on scroll?如何实现在滚动上替换前一个的复杂粘性部分标题？
【发布时间】：2020-06-18 10:48:36
【问题描述】：

在纯 css 中是否有任何方法可以创建符合以下行为的粘性组件：

假设 HTML 中有 2 个部分，

最初，Ist 部分的标题位于顶部，当用户向上滚动页面时，

它应该在顶部保持粘性，而其他 2 个部分的标题应该向上移动。

当第 2 节的标题刚好碰到标题 1 的标题时，标题 1 也应该开始向上倾斜，

现在第 2 节取代了第 2 节。反之亦然。

【问题讨论】：

通过 javascript 监听 onscroll 可能会有所帮助。

标签： javascript html css

【解决方案1】：

请查看本站：https://www.w3schools.com/howto/howto_css_sticky_element.asp

你可以写类似这样的css代码：

.header {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

Codepen 上的实时示例：https://codepen.io/dav1d-pt/pen/rNxWgOV

请记住，该功能在许多浏览器中支持不佳。你可以在这里查看：https://caniuse.com/#feat=css-sticky

【讨论】：