【前端】滚动条到某一位置时用JS对某元素进行固定（吸顶效果）

2022-01-18留言：
本文可以不用看了，有个更简单的CSS方法是设置position:sticky;（粘性定位）属性做吸顶效果，去 了解一下 吧。

---

比如有这样一个需求：

当滚动条向上滑动到某一位置时，
用 JavaScript 修改style属性，对某元素进行固定，
比如网页侧边栏的目录等元素，
不想让它随着网页的滚动而被划上去。

这里可以用到 HTML DOM 属性对象的onscroll 事件

可复制到【HTML/CSS/JS 在线工具】中演示：

<div id="app" style="width:100px;height:100px;background:red">
        <div style="width:50px;height:50px;background:green"></div>
</div>
    
<!-- 建一个div盒子，heigh：20000px,更好地看出页面滚动效果 -->
<div style="height: 20000px;"></div>

window.onscroll = function () {
            //设置scrollTop > 300，即滚动条向下滚动，div的内容上方超出浏览器最顶部位置>300。
            if (document.documentElement.scrollTop > 300) {
                //设置固定定位，固定高度0px
                app.style.position = 'fixed'
                app.style.top = 0
            } else {
                //static ：position默认值 没有定位
                app.style.position = 'static'
            }
        }

---

举一反三：

其实我们除了可以改变某元素的 position 属性值，还能改变 display 等属性，结合onscroll 事件灵活运用可以获得更多的有趣玩法。

---

参考内容：
[1] https://blog.csdn.net/qq_41983339/article/details/108777797
[2] https://www.runoob.com/jsref/event-onscroll.html