Apple网页中滚动效果

打开Apple官网查看iPhone页面，我们可以看到一个特殊效果，当你滚动鼠标时，页面不出现滚动效果，但内容却在变化。现在，基于 position : sticky 可以很容易实现这个效果。

初次尝试

刚开始，打算用absolute来实现这个效果，但用 JavaScript 计算 absolute 的 top 时，偶尔会出现滚动效果跟不上速度的情况，导致图片会随着容器滚动一段，体验十分不好。

.container {
    position : relative;
    height : 800vh;
}

.container > img {
    position : absolute;
    top : 0;
    width : 100%;
    height : 100vh;
}

大概设置使用8张图来展示，通过监听页面滚动事件来进行图片的切换和元素的新位置。

var con = document.querySelector("#con");
var image = document.querySelector("#image");

window.addEventListener( 'scroll' , e =>{
    if (window.scrollY > con.offsetTop && window.scrollY < (con.offsetTop + con.clientHeight - image.clientHeight))
        image.src ='images/'+  (Math.floor((window.scrollY - con.offsetTop) / (image.clientHeight / 2))) + '.jpg';
        image.style.top=window.scrollY - con.offsetTop ;
});

之后还考虑过使用 fixed 布局来进行定位，使其不会变化，不过效果也是不尽人意，这样对于导航栏又需要重新计算布局。

之后再谷歌查找一番有没有把两个结合起来的操作，一查还真有，就是本文的主角 ：sticky 布局，MDN介绍在这里，简单来说，就是再父元素不滚动是，子元素表现出来的是 absolute 布局，根据设定好的 left， top 值来展示，当父级元素开始滚动并达到该子元素时，表现出 fixed 布局，该元素就固定在页面上（表述为 fixed ，其实不够准确，fixed 是相对整个浏览器页面来说的，sticky 的固定只是根据父级元素来说）。

.container {
    position : relative;
    height : 800vh;
}

.container > img {
    position : sticky;
    top : 0;
    width : 100%;
    height : 100vh;
}

监听页面滚动事件只进行图片的切换，不需要重新计算元素定位。

var con = document.querySelector("#con");
var image = document.querySelector("#image");

window.addEventListener( 'scroll' , e =>{
    if (window.scrollY > con.offsetTop && window.scrollY < (con.offsetTop + con.clientHeight - image.clientHeight))
        image.src ='images/'+  (Math.floor((window.scrollY - con.offsetTop) / (image.clientHeight / 2))) + '.jpg';
});

最终效果如下