123

4 months ago · 15ce73bb9f
parent 02df881da6
commit 15ce73bb9f
2 changed files with 38 additions and 11 deletions
--- a/jquery-3.7.1.min.js
+++ b/jquery-3.7.1.min.js
--- a/任务1和任务2.html
+++ b/任务1和任务2.html
@ -1,11 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 </head>
+
 <body>
+    <div class="ProgressBar"></div>
    <div class="header">
        我是头部
    </div>
@ -15,12 +18,13 @@
        </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="">
    </div>
 </body>
 <style>
-    .header{
+    .header {
        position: fixed;
        top: -80px;
        left: 0;
@ -33,40 +37,61 @@
        font-size: 30px;
        transition: all 0.3s;
    }
-    .main{
+
+    .main {
        height: 1800px;
        width: 1000px;
        background-color: pink;
    }
-    .content{
+
+    .content {
        position: absolute;
        top: 500px;
        background-color: gray;
    }
+
+    .ProgressBar {
+        height: 3px;
+        width: 0vw;
+        background-color: rgb(12, 128, 236);
+        position: fixed;
+        top: 0px;
+        z-index: 100;
+    }
 </style>
+<script src="./jquery-3.7.1.min.js"></script>
 <script>
    const content = document.querySelector('.content')
    const header = document.querySelector('.header')
    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
        let viewScrollTop = document.documentElement.scrollTop
-        if(n>=content.offsetTop){
+        if (n >= content.offsetTop) {
            header.style.top = 0
-        }else{
+        } else {
            header.style.top = '-80px'
        }
-        if(viewScrollTop>400){
+        if (viewScrollTop > 400) {
            toTop.style.display = 'flex'
-        }else{
+        } else {
            toTop.style.display = 'none'

        }
    })
-    toTop.addEventListener('click',()=>{
+    toTop.addEventListener('click', () => {
        document.documentElement.scrollTop = 0
    })

 </script>
+
 </html>