pbf4giraj
/
ckgd2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

123

Browse Source
main
李成 4 months ago
parent 02df881da6
commit 15ce73bb9f
2 changed files with 38 additions and 11 deletions
Show Stats Download Patch File Download Diff File

2
jquery-3.7.1.min.js vendored
View File

File diff suppressed because one or more lines are too long

47
任务1和任务2.html
Unescape View File

@ -1,11 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <title>Document</title>
</head> </head>
<body> <body>
<div class="ProgressBar"></div>
<div class="header"> <div class="header">
我是头部 我是头部
</div> </div>
@ -15,12 +18,13 @@
</div> </div>
</div> </div>
<!--回到顶部按钮--> <!--回到顶部按钮-->
<div id="toTop" style="position: fixed; bottom: 70px; right: 50px; border-radius: 50%; background-color: rgba(0,0,0,0.1); height: 30px;width: 30px; display: none;flex-direction: column; justify-content: center; align-items: center;"> <div id="toTop"
style="position: fixed; bottom: 70px; right: 50px; border-radius: 50%; background-color: rgba(0,0,0,0.1); height: 30px;width: 30px; display: none;flex-direction: column; justify-content: center; align-items: center;">
<img src="./assets/top.png" style="height: 20px; width: 20px;" alt=""> <img src="./assets/top.png" style="height: 20px; width: 20px;" alt="">
</div> </div>
</body> </body>
<style> <style>
.header{ .header {
position: fixed; position: fixed;
top: -80px; top: -80px;
left: 0; left: 0;
@ -33,40 +37,61 @@
font-size: 30px; font-size: 30px;
transition: all 0.3s; transition: all 0.3s;
} }
.main{
.main {
height: 1800px; height: 1800px;
width: 1000px; width: 1000px;
background-color: pink; background-color: pink;
} }
.content{
.content {
position: absolute; position: absolute;
top: 500px; top: 500px;
background-color: gray; background-color: gray;
} }
.ProgressBar {
height: 3px;
width: 0vw;
background-color: rgb(12, 128, 236);
position: fixed;
top: 0px;
z-index: 100;
}
</style> </style>
<script src="./jquery-3.7.1.min.js"></script>
<script> <script>
const content = document.querySelector('.content') const content = document.querySelector('.content')
const header = document.querySelector('.header') const header = document.querySelector('.header')
const toTop = document.querySelector('#toTop') const toTop = document.querySelector('#toTop')
window.addEventListener('scroll',function(){ const ProgressBar = $(".ProgressBar")
$(window).scroll(function (e) {
let scrollTop = $(window).scrollTop(); // 获取滚动条的位置
let docHeight = $(document).height(); // 获取文档的高度
let windowHeight = $(window).height(); // 获取窗口的高度
let scrollProgress = (scrollTop) / (docHeight - windowHeight); // 计算滚动进度
ProgressBar.width(scrollProgress * 100 + 'vw'); // 设置进度条宽度
})
window.addEventListener('scroll', function () {
const n = document.documentElement.scrollTop const n = document.documentElement.scrollTop
let viewScrollTop = document.documentElement.scrollTop let viewScrollTop = document.documentElement.scrollTop
if(n>=content.offsetTop){ if (n >= content.offsetTop) {
header.style.top = 0 header.style.top = 0
}else{ } else {
header.style.top = '-80px' header.style.top = '-80px'
} }
if(viewScrollTop>400){ if (viewScrollTop > 400) {
toTop.style.display = 'flex' toTop.style.display = 'flex'
}else{ } else {
toTop.style.display = 'none' toTop.style.display = 'none'
} }
}) })
toTop.addEventListener('click',()=>{ toTop.addEventListener('click', () => {
document.documentElement.scrollTop = 0 document.documentElement.scrollTop = 0
}) })
</script> </script>
</html> </html>
Write Preview
Loading…
Cancel
Save