<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>进度条</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 3000px;
}
#process {
width: 0;
height: 3px;
background: #166e50;
position: fixed;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="process"></div>
<script>
window.onscroll = function () {
// Progress bar
var s = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
// console.log(s)
var body = document.body;
// console.log(body)
var html = document.documentElement;
// console.log(html)
var d = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
// console.log(d)
var c = window.innerHeight;
// console.log(c);
var position = (s / (d - c)) * 100;
document.getElementById('process').setAttribute('style', 'width: ' + position + '%');
}
</script>
</body>
</html>
原生顶部进度条根据页面滚动
最新推荐文章于 2022-04-12 13:52:34 发布