9.跟随页面滚动效果

跟随页面滚动非常的简单，就是设置元素的top值即可，代码量只有20行。

1.准备 HTML

    <div class="roll">

    </div>

2.准备css

一定要记得把动画个加上

        body{
            min-height: 4000px;
        }
        .roll{
            position: relative;
            width: 400px;
            height: 200px;
            background: red;

            transition: all .5s;
        }

3.js逻辑

这个 20 最初始 roll距离顶部的距离，具体看你的设置多少。

        const roll = document.querySelector('.roll');
        window.onscroll = (e) => {
            if(document.body.scrollTop > 20 ){
                roll.style.top = (document.body.scrollTop + 20) + 'px';
            }
        }