实现在某个地方固定定位

最新推荐文章于 2022-03-07 13:08:47 发布

Y_MO_W

最新推荐文章于 2022-03-07 13:08:47 发布

阅读量609

点赞数

文章标签： html css js 定位

本文链接：https://blog.youkuaiyun.com/Y_MO_W/article/details/106957862

版权

本文介绍了如何在页面中利用CSS实现元素的固定定位，即使在页面滚动时，该元素仍能保持在屏幕的特定位置。

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

固定定位

页面上实现滚动时触发固定定位

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

        .progressbar {
            height: 3px;
            background: skyblue;
            position: fixed;
            top: 0;
            left: 0;
            width: 30%;
        }
    </style>
</head>

<body>
    <div class="progressbar"></div>
    <div style="height: 500px;"></div>
    <div class="demo" style="height:100px;background:#000;top:0;width:100%"></div>
    <div style="height:2000px">
    </div> 



<script>
        let demo = document.querySelector('.demo')
        let offsetTop = demo.offsetTop

        window.onscroll = () => {
            let scrollTop = Math.floor(document.documentElement.scrollTop)
            let maxScrollTop = document.body.offsetHeight - window.innerHeight
            let percent = (scrollTop * 100 / maxScrollTop) + '%'
            document.querySelector('.progressbar').style.width = percent

            if (scrollTop > offsetTop) {
                demo.style.position = 'fixed'
            } else {
                demo.style.position = 'static'
            }

        }
    </script>
    </body>