js 进度条demo

js 进度条demo进度条案例<!DOCTYPEhtml><htmllang=”en”><head><metacharset=”UTF-8″><metaname=”viewport”content=”width=device-width,initial-scale=1.0″><title>进度条demo</title><style>*{

js

进度条案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>进度条demo</title>
    <style>
        *{ 
   
            margin: 0;
            padding: 0;
        }
        .progressbar{ 
   
            height: 3px;
            width: 1%;
            position: fixed;
            top: 0;
            left: 0;
            background-color: skyblue;
        }
    </style>
</head>
<body>
	// 进度条
    <div class="progressbar"></div>
    <div style="height: 500px;"></div>
    // 头部 当进度条走到一定距离时,头部就固定在浏览器顶部,不再移动
    <div class = 'demo' style="height: 100px;background-color: #000;top: 0;width: 100%;"></div>
    <div style='height:2000px;'></div>


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

        window.onscroll = () => { 
   
            // 滚动距离
            let scrollTop = Math.floor(document.documentElement.scrollTop)
            // 最大滚动距离 整个页面的高度 - 屏幕高度
            let maxScrollTop = document.body.offsetHeight - window.innerHeight
            // 计算比例
            let percent = (scrollTop / maxScrollTop) * 100 + '%'
            document.querySelector('.progressbar').style.width = percent


            if(scrollTop > mytop){ 
   
                mydiv.style.position = 'fixed'
            }else{ 
   
                mydiv.style.position = 'static'
            }
        }
    </script>
</body>
</html>

今天的文章js 进度条demo分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/29296.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注