关键技术

    • position: sticky
    • clip-path 裁剪元素
      • inset 使其只显示元素一部份
    • scroll 事件处理函数计算滚动率 ```javascript // 当前滚动距离 / (页面总高度 - 视窗的高度) let scrolled = document.documentElement.scrollTop / (document.documentElement.scrollHeight - document.documentElement.clientHeight);

    // 这个比率 0% 是最顶，100% 是最底 ``` 两者结合，在页面滚动时计算新的 inset() 设定值
    点击查看【codepen】