页面滚动时，固定上方div盒子( scrollTop() )_页面滚动时某个div固定-CSDN博客

本文链接：https://blog.csdn.net/qq_41983339/article/details/108777797

本文介绍如何使用scrollTop()方法和window.onscroll事件监听，实现在页面滚动时，div元素保持固定位置。通过设置position属性，确保内容区上方的div在滚动到一定高度时变为固定定位。适合前端开发者了解和实践滚动事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面卷起时，固定上方div盒子

前言
要求：简单做个div盒子，设置页面滚动条滑动时，固定住盒子的位置。
读入数据

前言

一、scrollTop() 方法设置或返回被选元素的垂直滚动条位置。

提示：当滚动条位于最顶部时，位置是 0。

提示：以下是本篇文章正文内容，下面案例可供参考

要求：简单做个div盒子，设置页面滚动条滑动时，固定住盒子的位置。

示例：使用scrollTop() 结合 window.onscroll = function () {}

读入数据

代码如下（示例）：


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

    <script>
        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'
            }
        }
 </script>
 </body>