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';
});

最终效果如下

发布时间:2021-04-27

其他阅读

管道技术——中间件的灵魂

在现代Web开发中,中间件技术使用越来越广泛,本文带大家了解中间件的基础,同时也是中间件的灵魂所在,管道技术。在C#中,依赖于委托,我们可以很容易就实现一个中间件管道。所以在阅读本文前,请确保你已经学会了什么是委托,包括但不限于Delegate,Action,Func。除此之外,本文还会使用到反射相关知识,请确保你已经学会了什么是反射。

Web前端中实现自定义右键菜单

在原生的桌面应用中,右键菜单是个很常见也很常用的东西,但是在Web应用中,由于浏览器自带了右键菜单,所以我们很少见到应用有自己的右键菜单,但不常见并不代表没有,本文就会介绍一个右键菜单的实现。

Nginx重定向HTTP到HTTPS

HTTP协议以纯文本形式进行数据的交互,数据明文传输,容易被监听,窃取和伪造,HTTPS在HTTP的基础上,使用了TLS/SSL对通信过程进行加密,数据得到了有效的保护,就算被拦截到也无法获取信息,更没法实施中间人攻击。本文将会介绍如何在Nginx中配置HTTP重定向到HTTPS。

C#桌面应用置顶

Winform和WPF开发中,有时会有需要置顶窗体的需求,本文就介绍怎么使用Win32API进行置顶

解决sqlite依赖无法打包单文件的问题

在一次WPF开发中,选用了sqlite作为内嵌数据库,使用 ystem.Data.SQLite 库来调用,在使用 Fody 进行单文件打包时,发现打包文成后会出现 x86 和 x64 两个特定的文件夹,分别对应着32位和64位的 SQLite.Interop.dll,本文介绍修改项目文件来实现将 sqlite 通信库一起打包成单文件的方法。