updated 添加浮动效果

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;