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

其他阅读

Blazor文件上传解决方案

Blazor 是由 Asp.Net Core 团队推出的一个Web前端SPA解决方案,其中包括了使用 WebAssembly 的 Blazor Wasm 和使用 SignalR 进行实时交互的 Blazor server。本篇文章中使用的是 Blazor Wasm 方案来验证上传文件的操作。

Linux中查看,添加,修改,删除用户和用户组

将用户分组是Linux系统中对用户进行管理及控制访问权限的一种手段。某个用户都属于某个用户组;一个组中可以有多个用户,一个用户也可以属于不同的组。当一个用户同时是多个组中的成员时,登录时所属的为默认组,而其他组称为附加组。本文将会介绍在 Linux 中查看,添加,修改,删除用户和用户组,注意:权限管理非常重要,可能一不小心就导致系统无法登录,请谨慎操作

Angular使用路由复用实现单页多窗(Tab)

我们在开发后台管理系统时,一个很重要的需求就是多窗口编辑,来回切换使用。一种思路是使用iframe来记录多个多页面展示,本文通过Angular路由复用来实现这一需求。

Apple中的模糊效果

本文主要介绍在前端里比较重要的一个效果——高斯模糊效果,也有人称为毛玻璃特效。在Mac和Windows系统样式上也都在使用模糊效果。下面聚焦于Web前端中的模糊效果开发。

Entity Framework Core链接Oracle的问题

最近使用 Entity Framework Core 来链接 Oracle 11g 数据库,发现很多 LINQ 语句使用起来都会有问题,查看日志输出发现是生成SQL语句无法被 11g 版本执行,好在Oracle官方已经给我们提供了解决方案。