> For the complete documentation index, see [llms.txt](https://nodelover.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nodelover.gitbook.io/web/9.-gen-sui-ye-mian-gun-dong-xiao-guo.md).

# 9.跟随页面滚动效果

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

1.准备 HTML

```markup
    <div class="roll">

    </div>
```

2.准备css

一定要记得把动画个加上

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

            transition: all .5s;
        }
```

3.js逻辑

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

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