From 91fbc46910640e71279bcfeeefe58616319b8fdc Mon Sep 17 00:00:00 2001
From: p6pqowu53 <3038288332@qq.com>
Date: Sat, 19 Oct 2024 09:57:18 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E7=A7=BB=E5=8A=A8=E4=BC=9A?=
 =?UTF-8?q?=E6=9C=89=E8=BF=9B=E5=BA=A6=EF=BC=8C=E5=AF=BC=E8=88=AA=E6=A0=8F?=
 =?UTF-8?q?=E4=BC=9A=E6=9C=89=E5=AE=9A=E4=BD=8D=E5=87=BA=E7=8E=B0=EF=BC=8C?=
 =?UTF-8?q?=E4=B8=8A=E4=B8=8B=E5=AF=BC=E8=88=AA=E6=A0=8F=E5=90=8C=E6=AD=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 PageScroll.html | 331 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 331 insertions(+)
 create mode 100644 PageScroll.html
diff --git a/PageScroll.html b/PageScroll.html
new file mode 100644
index 0000000..16f131d
--- /dev/null
+++ b/PageScroll.html
@@ -0,0 +1,331 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        html {
+            color: azure;
+            scroll-behavior: smooth;
+            background-color: #000;
+            /*color: azure;*/
+            margin: 0;
+            padding: 0;
+            scroll-behavior: smooth;
+            
+        }
+        body{
+            position: relative;
+        }
+        .Progress {
+            width: 100%;
+            padding: 0;
+            margin: 0;
+            position: fixed;
+            top: 0px;
+            background-color: #000;
+
+        }
+
+        .Prostick {
+            width: 0;
+            background-color: aqua;
+            height: 5px;
+        }
+
+        .Topage {
+            border: 3px silver solid;
+            overflow: hidden;
+            
+
+
+        }
+
+        .Topage ul {
+            list-style: none;
+            overflow: hidden;
+
+        }
+
+        .Topage ul li {
+            float: left;
+            margin: 0 15px;
+            line-height: 60px;
+            cursor: pointer;
+            transition: all 0.3s;
+            width: 70px;
+            text-align: center;
+            font-size: 16px;
+            font-weight: bold;
+            
+
+        }
+
+        .Topage ul li:hover {
+            animation: jump .3s;
+
+
+        }
+
+        .Topage img {
+            float: left;
+            height: 100px;
+        }
+
+        @keyframes jump {
+            0% {
+                transform: translateY(0);
+            }
+
+            50% {
+                transform: translateY(-3px);
+            }
+
+            100% {
+                transform: translateY(0);
+            }
+        }
+
+        .Highlight {
+            width: 100px;
+            height: 5px;
+            background-color: #66ccff;
+            float: left;
+            transition: all 0.5s;
+            position: absolute;
+            top: 80px;
+            left: 235.49px;
+            z-index: 100;
+
+        }
+
+        .active {
+            color: #66ccff;
+        }
+        .box1{
+            text-align: center;
+        }
+
+        .box1 img {
+            width: 1000px;
+            height: 550px;
+            margin: 100px 50px;
+        }
+
+        .NavBar {
+            width: 100%;
+            border: 1px white solid;
+            overflow: hidden;
+            position: fixed;
+            top: 3px;
+            opacity: 0;
+            transition: all 0.5s;
+            background-color: silver;
+            display: none;
+
+        }
+
+        .NavBar ul {
+            list-style: none;
+            overflow: hidden;
+            margin: 0;
+
+        }
+
+        .NavBar ul li {
+            float: left;
+            margin: 0 15px;
+            line-height: 60px;
+            cursor: pointer;
+            transition: all 0.3s;
+            width: 70px;
+            text-align: center;
+            font-size: 16px;
+            color: #000;
+            font-weight: bold;
+        }
+
+        .NavBar ul li:hover {
+            animation: jump .3s;
+
+
+        }
+
+        .NavBar img {
+           
+            float: left;
+            width: 124px;
+        }
+
+
+        .Highlight2 {
+            width: 70px;
+            height: 3px;
+            background-color: #66ccff;
+            float: left;
+            transition: all 0.5s;
+            position: absolute;
+            top: 50px;
+            left: 179px;
+            z-index: 10;
+
+
+        }
+        .Top{
+            position: fixed;
+            background-color: #66ccff;
+            height: 35px;
+            width: 35px;
+            z-index: 999;
+            bottom: 100px;
+            right: 100px;
+            line-height: 35px;
+            text-align: center;
+            border-radius: 50%;
+            opacity: 0;
+            transition: 0.5s;
+            cursor: pointer;
+        }
+
+    </style>
+</head>
+
+<body>
+    <div class="Progress">
+        <div class="Prostick"></div>
+    </div>
+    <div class="Topage">
+        <img src="image/Title.png" title="明日方舟">
+        <ul>
+
+            <li>首页</li>
+            <li>公告</li>
+            <li>世界观</li>
+            <li>干员</li>
+            <li>玩法介绍</li>
+            <li>实机演示</li>
+            <div class="Highlight"></div>
+        </ul>
+    </div>
+    <div class="NavBar">
+        <img src="image/Title.png" title="明日方舟">
+        <ul>
+
+            <li>首页</li>
+            <div class="Highlight2"></div>
+            <li>公告</li>
+            <li>世界观</li>
+            <li>干员</li>
+            <li>玩法介绍</li>
+            <li>实机演示</li>
+
+        </ul>
+    </div>
+
+    <div class="box1">
+        <div class="firstyear">
+            <img src="image/1rd.png" alt="">
+        </div>
+        <div class="secendyear">
+            <img src="image/2rd.jpg" alt="">
+        </div>
+        <div class="thirdyear">
+            <img src="image/3rd.jpg" alt="">
+        </div>
+    </div>
+
+
+            <div class="Top">Top</div>
+    <script>
+        let totalhight = document.body.scrollHeight - window.innerHeight
+        const Prostick = document.querySelector('.Prostick')
+        window.addEventListener('scroll', function () {
+            let pro = (window.pageYOffset / totalhight) * 100
+            Prostick.style.width = pro + '%'
+        })
+
+        let lis1 = document.querySelector('.Topage ul li')
+        let lis3 = document.querySelector('.NavBar ul li')
+        lis1.style.position = 'relative'
+        lis3.style.position = 'relative'
+        let lis = document.querySelectorAll('.Topage ul li')
+        let lis2 = document.querySelectorAll('.NavBar ul li')
+        const High = document.querySelector('.Highlight')
+        const High2 = document.querySelector('.Highlight2')
+        for (i = 0; i < lis.length; i++) {
+        
+            let x = i
+            lis[i].addEventListener('click', function () {
+
+                lis2[x].style.color='#3388bb'
+                lis[x].style.color='#66ccff'
+                High.style.transform = `translateX(${x * 100}px)`
+                High2.style.transform = `translateX(${x * 100}px)`
+
+                for (i = 0; i < lis.length; i++) {
+                    if (i == x) {
+                        continue;
+                    }
+                    else {
+                        lis[i].style.color='azure'
+                        lis2[i].style.color='#000'
+                    }
+                }
+            })
+
+        }
+        const body = document.querySelector('body')
+        
+         for (i = 0; i < lis.length; i++) {
+             let x = i
+             lis2[i].addEventListener('click', function () {
+                lis[x].style.color='#66ccff'
+                 lis2[x].style.color='#3388BB'
+                 High2.style.transform = `translateX(${x * 100}px)`
+                High.style.transform = `translateX(${x * 100}px)`
+
+                 for (i = 0; i < lis.length; i++) {
+                     if (i == x) {
+                         continue;
+                     }
+                     else {
+                         lis[i].style.color='azure'
+                         lis2[i].style.color='#000'}
+                 }
+             })
+         }
+         
+
+        body.onload = function () {
+            lis3.style.color='#66ccff'
+            lis1.style.color='#66ccff'
+            console.log(2)
+        }
+        const NavBar = document.querySelector('.NavBar')
+        const Top = document.querySelector('.Top')
+        Top.addEventListener('click',function(){
+            document.documentElement.scrollTop= 0
+        })
+        window.addEventListener('scroll', function () {
+            let n = document.documentElement.scrollTop
+            if (n >= 100) {
+                NavBar.style.opacity = '1'
+                NavBar.style.display = 'block'
+                Top.style.opacity = '1'
+            }
+            else {
+                NavBar.style.opacity = '0'
+                Top.style.opacity = '0'
+
+                setTimeout(function () {
+                    if (n == 0) NavBar.style.display = 'none'
+                }, 100);
+            }
+        })
+
+    </script>
+</body>
+
+</html>
\ No newline at end of file
