Mike Solomon 参与了 Esquire 上一篇精美的滚动式文章，并 撰写了一篇关于它的博客文章。它包含了每个步骤的 GIF 动画，不仅展示了 position: sticky; 的使用方法，还包括负边距、包装器 div、背景，甚至一些用于测量 JavaScript 代码。
文章中没有提供任何独立的演示来展示这种效果。我想尝试反向工程它。
这是我的版本，我称之为“带有突出图形的粘性图注”
这个演示中充满了魔数，用于实现“隐藏在后面”的退出效果。如果这不是重点，这个版本更简洁。
可能没有完全达到 Mike 的效果，但我不知道他在博客文章中追求的具体细节。他的最终 GIF 动画是
这是我从文章本身拍摄的简短视频，也许能启发你找到不同的方法
哎呀！ 我实际上与 Mike 讨论了这一切，他说这一切的主要收获（我完全忽略了 - 对不起 Mike！）是“sticky 不仅仅适用于屏幕顶部”。请注意最终产品中粘性元素何时变成屏幕顶部元素。它更像是屏幕中间的位置。这就是 position: sticky; 中 top 值的作用，但是，在这个演示中，目标是让它滑入滑出图像，这会变得很棘手。
经过反复的修改...