From 9ae41c29d4b1d10a36c624c7c8cc12d6349d0aa3 Mon Sep 17 00:00:00 2001
From: PASSER-BY <zhenghaole1990@126.com>
Date: Sat, 23 Dec 2023 00:44:36 +0800
Subject: [PATCH] =?UTF-8?q?updated=20=E6=B7=BB=E5=8A=A0=E6=B5=AE=E5=8A=A8?=
 =?UTF-8?q?=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html             |  39 +++++++++++++++++++++++++++++++++++++--
 static/image/gotop.png | Bin 0 -> 881 bytes
 static/style/index.css |  21 +++++++++++++++++++++
 zh-HK.html             |  39 +++++++++++++++++++++++++++++++++++++--
 4 files changed, 95 insertions(+), 4 deletions(-)
 create mode 100644 static/image/gotop.png

diff --git a/index.html b/index.html
index c882846..23e2b12 100644
--- a/index.html
+++ b/index.html
@@ -40,8 +40,8 @@
 				</svg>
 			</div>
 			<div class="header">
-				<div class="inner">
-					<div class="mod-head">
+				<div class="mod-head">
+					<div class="inner">
 						<div class="bd">
 							<span class="language">
 								<a class="active" href="/relationship/">简体</a>
@@ -431,11 +431,46 @@
 						</div>
 					</div>
 				</div>
+				<div class="mod-fixedbar">
+					<div class="bd">
+						<a href="javascript:;"><img src="static/image/gotop.png" width="24" height="24"></a>
+					</div>
+				</div>
 			</div>
 		</div>
 		<script type="text/javascript" src="dist/relationship.min.js"></script>
 		<script type="text/javascript" src="dist/relationship-mode.min.js"></script>
 		<script type="text/javascript">
+			// 头部滚动
+			(function(){
+				let $header = document.querySelector('.header');
+				document.addEventListener('scroll',function(){
+					let scrollTop = document.documentElement.scrollTop;
+					let ratio = Math.min(scrollTop/1000,1);
+					$header.style.background = 'rgba(255,255,255,'+(ratio*0.8)+')';
+					$header.style.boxShadow = '1px 1px 6px rgba(0,0,0,'+(ratio*0.1)+')';
+				});
+			})();
+			// 底部滚动
+			(function(){
+				let timer = null;
+				let $gotop = document.querySelector('.mod-fixedbar a');
+				$gotop.addEventListener('click',function(){
+					cancelAnimationFrame(timer);
+					let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
+					let move = scrollTop/18;
+					timer = requestAnimationFrame(function fn(){
+						var oTop = document.body.scrollTop || document.documentElement.scrollTop;
+						if(oTop > 0){
+							document.body.scrollTop = document.documentElement.scrollTop = oTop - move;
+							timer = requestAnimationFrame(fn);
+						}else{
+							cancelAnimationFrame(timer);
+						}
+					});
+				});
+			})();
+
 			// 获取数量
 			document.getElementById('count').innerText = relationship.dataCount;
 
diff --git a/static/image/gotop.png b/static/image/gotop.png
new file mode 100644
index 0000000000000000000000000000000000000000..04fe0c00cc3ff89c4513f245e4de164a032fdbdb
GIT binary patch
literal 881
zcmV-%1CIQOP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm00001b5ch_0Itp)
z=>Px&D@jB_RA@u(nq7|KFbv1zmU}F7k{M32%OMEjX@)06ImEIjS>`0$gV1K>D6Z0w
zG-*D72arZ1(Kh-2Y$tYHfED;04u@r3*S{HKAB?e92=QmT-F_9Aib3u{Pp8v|5aO?8
z+%xBVoqN8l02c9QCHR;6pB*9_fK5DE{CGTm0l;Soh%5k8;wfYdh?aBymLr^!0Yb!=
zgh&FIBfb<wG(e2_5)e@UDdKZO%m&CIJ}1O1fSlrUK?DPo5T64g2%w~R7ev=}tKDwb
z`f`OA;2z>rASMCsDLxj$3GfK<F%VXOM~a^daRcxS;^#n&0G>&FD8vBpjN(HeB)~I^
z_d!U2rfKj1UhLTCOGcsB^+S;mVvmgi0zmPfCA$ZqB7OHMh<5<kZ#J8YHxv5?eDw7f
zz{>-P7I=kFq5+d1mma`o>|(K4&KV82Fx&k&7Jgq<73CEM04@Hxo}qD?rom_4E#rQ>
zo|gbd*DQ#m>$*4n#AI}&U1PLUCoLnP+Qzu)bPuIO-}l%GA3gwpmXP0J)-y-z`~FM-
zN<4O?(fXrF$h$%a?2XEHy9+`CkYnJS0PsW2J$RI|u)OXvm2xMR7>sl7yibY$N1#*h
z0W?ord!rh_g>$~rwc$J%ma0jNA-SH+#GwF9)1c+ivO%qL?fy0AoZ9bF>l6U3)w-^w
zr$@Dr%?lv_dKGJ~372OzkKK5|2cRIyVA4xTA*4+hWPNS7!H`=5z)Ihl0s*LUmUE^8
zNFj`|n{b%g$|#KV#TXJo>YmY@sQ^Ol6eCOe_F-)uj25fU1KM+pLN*#8CjPY$qA+j*
zV7;$)He9e6Za<Z`acdn6mIc6!<p2+i;@AS_OoX(3(hbo7`u-oW2CQqxmdH?ORaF;P
z84?X(Y-w|MA-Q%;aNioRxg{6CkQoEQ2TKBLhQB+25k@!Z-;p3G5zWrT**$;*8kMXQ
zLcwA|haQ++3%NX-6hdZwq9(zY5__!Quh(mf=M1cLwKw(7aJzd5kyVUJacUV%hFMks
zm8j(J8_d#ns!&rUFV^sMzQEf48=vw0<VMYjNy~eBBMtun5%?QktCo;K00000NkvXX
Hu0mjfFY${6

literal 0
HcmV?d00001

diff --git a/static/style/index.css b/static/style/index.css
index cf9a974..63e4b8a 100644
--- a/static/style/index.css
+++ b/static/style/index.css
@@ -91,6 +91,14 @@ a:hover{
     }
 }
 
+.header{
+    position: sticky;
+    left: 0;
+    top: 0;
+    width: 100%;
+    z-index: 99;
+    backdrop-filter: blur(10px);
+}
 .mod-head .bd{
     height: 36px;
     padding: 10px 0;
@@ -645,6 +653,19 @@ a:hover{
     line-height: 30px;
 }
 
+.mod-fixedbar .bd a{
+    position: fixed;
+    right: 20px;
+    bottom: 20px;
+    display: block;
+    width: 48px;
+    height: 48px;
+    background: rgba(255,255,255,0.8);
+    box-shadow: 1px 1px 6px rgba(0,0,0,0.1);
+    line-height: 48px;
+    text-align: center;
+}
+
 @media screen and (max-width: 1020px) {
     .header{
         margin-bottom: 10px;
diff --git a/zh-HK.html b/zh-HK.html
index f63db09..1861c3d 100644
--- a/zh-HK.html
+++ b/zh-HK.html
@@ -40,8 +40,8 @@
 				</svg>
 			</div>
 			<div class="header">
-				<div class="inner">
-					<div class="mod-head">
+				<div class="mod-head">
+					<div class="inner">
 						<div class="bd">
 							<span class="language">
 								<a href="/relationship/">简体</a>
@@ -431,11 +431,46 @@
 						</div>
 					</div>
 				</div>
+				<div class="mod-fixedbar">
+					<div class="bd">
+						<a href="javascript:;"><img src="static/image/gotop.png" width="24" height="24"></a>
+					</div>
+				</div>
 			</div>
 		</div>
 		<script type="text/javascript" src="dist/lang/relationship.zh-HK.min.js"></script>
 		<script type="text/javascript" src="dist/lang/relationship-mode.zh-HK.min.js"></script>
 		<script type="text/javascript">
+		// 頭部滾動
+		(function(){
+			let $header = document.querySelector('.header');
+			document.addEventListener('scroll',function(){
+				let scrollTop = document.documentElement.scrollTop;
+				let ratio = Math.min(scrollTop/1000,1);
+				$header.style.background = 'rgba(255,255,255,'+(ratio*0.8)+')';
+				$header.style.boxShadow = '1px 1px 6px rgba(0,0,0,'+(ratio*0.1)+')';
+			});
+		})();
+		// 底部滾動
+		(function(){
+			let timer = null;
+			let $gotop = document.querySelector('.mod-fixedbar a');
+			$gotop.addEventListener('click',function(){
+				cancelAnimationFrame(timer);
+				let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
+				let move = scrollTop/18;
+				timer = requestAnimationFrame(function fn(){
+					var oTop = document.body.scrollTop || document.documentElement.scrollTop;
+					if(oTop > 0){
+						document.body.scrollTop = document.documentElement.scrollTop = oTop - move;
+						timer = requestAnimationFrame(fn);
+					}else{
+						cancelAnimationFrame(timer);
+					}
+				});
+			});
+		})();
+
 			// 獲取數量
 			document.getElementById('count').innerText = relationship.dataCount;