likes
comments
collection
share

CSS系列之使用sticky定位实现滚动控制动画效果

作者站长头像
站长
· 阅读数 18

如果我们都去做自己能力做得到的事，我们会让自己大吃一惊。

写在最前

在逛一些网站官网的时候想必大家都见过页面定格滚动控制动画的交互，记得公司开会的时候主管给我们看苹果官网，有被这个效果惊艳到，本想着思考如何实现，但一秒钟过后就被想要买手机的想法给覆盖掉了。现在回想起来要填掉这个坑，经过我的一番折腾下，完成了以下效果

CSS系列之使用sticky定位实现滚动控制动画效果

（注意看右上角滚动条的位置）

是不是很炫酷呢，接下来让我们来看看如何实现吧 🌀🌀🌀

position: sticky

CSS系列之使用sticky定位实现滚动控制动画效果

相信很多包括我在内的‘切图大师’在实现固定头部功能时都发现了这个好用的属性吧。

简单介绍一下，这是用来实现粘贴布局的属性，像fixed布局一样，需要设置top\left\bottom\right值，当未滚动到设置的高度时，像正常情况一样遵守文档流，否则则像fixed属性一样固定在设定的位置，非常好用~

比如实现类似备忘录的顶部字母固定

CSS系列之使用sticky定位实现滚动控制动画效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    * {
        padding: 0;
        margin: 0;
    }

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

    .top {}

    .outer {
        height: 120vh;
    }

    .sticky {
        top: 0;
        position: sticky;
        height: 50px;
        line-height: 50px;
        font-size: 20px;
        font-weight: 600;
        color: #1345B7;
        text-align: center;
        background: #000000;
    }
</style>

<body>
    <div>
        <div class="container">
            <div class="sticky">🌀 ChingShun A</div>
        </div>
        <div class="container">
            <div class="sticky">🌀 ChingShun B</div>
        </div>
        <div class="container">
            <div class="sticky">🌀 ChingShun C</div>
        </div>
        <div class="container">
            <div class="sticky">🌀 ChingShun D</div>
        </div>
        <div class="container">
            <div class="sticky">🌀 ChingShun E</div>
        </div>
    </div>

    <script>
    </script>
</body>

</html>

通过上面的案例，有聪明的人一下就想到了今天要实现的思路：

把sticky高度设置成100vh，父元素设置一个较大的高度。

没错，我们试试看

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    .container {
        height: 300vh;
        position: relative;
    }

    .top {
        height: 500px;
    }

    .outer {
        height: 120vh;
    }

    .sticky {
        top: 0;
        position: sticky;
        height: 100vh;
        line-height: 100vh;
        font-size: 20px;
        font-weight: 600;
        color: #1345B7;
        text-align: center;
        background: #000000;
    }
</style>

<body>
    <div>
        <div class="container">
            <div class="top"></div>
            <div class="sticky">🌀 ChingShun</div>
        </div>
        <div class="container">
            <div class="top"></div>
            <div class="sticky">🌀 ChingShun</div>
        </div>
    </div>

    <script>
    </script>
</body>

</html>

CSS系列之使用sticky定位实现滚动控制动画效果

看！这就是局部Sticky！

接下来需要做的是监听滚动控制位移了，简单提供一下思路：

  1. 算出当前滚动位置占容器的百分比
  2. 使用时间轴设计模式，设置属性end和start来控制某一个动作的开始与结束时间。
  3. 使用transform 控制位移旋转等等效果

总结

CSS非常强大，用的好可以上天入地。随着用户的审美越来越挑剔，CSS为了跟上节奏新出属性的功能性也是越发强大了。对CSS未来的发展很憧憬，希望有朝一日能够让交互效果全由CSS实现，JS只关注数据和底层的东西。

好了，洗澡洗澡。

转载自:https://juejin.cn/post/7241148626814287930
评论
请登录