浏览 Apple 官网时发现一个有意思的动画，随着页面的滚动，电脑位置不懂但是盖子慢慢打开，并且在完全打开后会随着页面滚动。

首先反应是绝对定位，用的图片随滚动替换，然后判断滚动到一定位置时改成相对布局。但是这种方案有个问题是在对预定位置的判断上，很难做到完美，而且页面如果有变动维护也比较不好看。

经过审查元素发现定位是sticky粘性定位，它可以让元素粘在父元素的某个位置，比如悬浮导航条此时完全可以使用这个属性。

position: sticky;
top: 0;

回到开始的话题，有这个属性后，让Mac粘在固定的位置，父元素高度设为一定值（值越大打开盖子速度越慢，参考剪辑里面的时间线），然后根据已滚动高度计算出相对滚动比列替换图片即可。

// process 为计算得出的比例，121为总图片数
let value = (process*121).toFixed(0).toString().padStart(3, "0");
let img = new Image();
img.src = `./mac_0${value}.jpg`;
img.onload = () => {
    mac.style.setProperty("background", `url(${img.src}`)
}

Update

2020-02-06
left值很奇怪，到达某个阈值后不再延伸，假如阈值是460px，你把值设为800px表现的效果还是460px。

实验后发现元素宽度加上左右偏移值无法超出父元素宽度，超出部分自动忽略