Apple官网滚动效果原理
实现效果
最上方元素滚动至一定程度后，逐渐露出下面被遮盖的元素，此时下面被遮盖的元素停留在原地。再继续滚动一段距离之后，下面被遮盖的元素才开始滚动。
文字表述可能不是十分清楚，具体可以直接看Apple官网，它的大部分产品介绍都用了这种效果。
实现原理
最开始我还以为这种实现需要监听滚动事件，然后使用js来控制元素的位置。看了Apple的源代码之后才发现我想的太复杂了。
这个效果和position:sticky的效果其实特别像，只不过以往用到的都是让一个元素（比如说导航栏）始终停留在顶部，而这里需要它滚动到一定位置后能够继续滚动。要实现这样的效果其实很简单，只需要在position:sticky的元素外套一个父元素。当父元素滚动出屏幕范围后，position:sticky元素自然也就滚动出屏幕范围了。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
div {
font-size: 100px;
text-align: center;
}
.div1 {
height: 3000px;
background: red;
opacity: 0.5;
}
.div2 {
height: 2000px;
margin-top: -100vh;
background: blue;
}
.div3 {
height: 2000px;
}
.sticky-content {
position: sticky;
top: 0;
}
</style>
</head>
<body>
<div class="div1">
<div>div1</div>
</div>
<div class="div2">
<div class="sticky-content">
div2
</div>
</div>
<div class="div3">div3</div>
</body>
</html>
|
