Update file attributions.html

wiki/pages/attributions.html

@@ -33,15 +33,11 @@
     margin-left: 130px; 
     }
 
-    .progress-bar {
-     position: fixed;
-     left: 170px; /* 侧边栏宽度加上10px间距 */
-     top: 230px; /* 与侧边栏顶部对齐 */
-     width: 8px; /* 进度条宽度 */
-     background-color: hsl(17, 100%, 50%); /* 进度条颜色 */
-     height: 0%; /* 初始高度 */
-     transition: height 0.3s ease-out; /* 平滑过渡效果 */
-     z-index: 999; /* 确保进度条显示在其他内容之上 */
+    .bar{
+      position: fixed;
+      top: 0;
+      width: 0.5%;
+      height: 4px; 
     }
 
   </style>
@@ -64,7 +60,7 @@
     <li><a href="#topic4"">Topic4</a></li>
     </ul>
 </div>
-<div class="progress-bar" id="progressBar"></div>
+<div class="bar" style="width: 0%; height: 5px; background: #0984e3; position: fixed; top: 0; left: 0; z-index: 1000;"></div>
 
 <div class="row mt-4">
   <div class="col-lg-12">
@@ -127,10 +123,18 @@
 {% endblock %}
 
 <script>
-  window.onscroll = function() {
-      var winScroll = document.documentElement.scrollTop || document.body.scrollTop;
-      var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
-      var scrolled = (winScroll / height) * 100;
-      document.getElementById("progressBar").style.height = scrolled + "%";
-  };
-  </script>
\ No newline at end of file
+window.addEventListener('scroll', () => {
+    moveBar('#e74c3c'); // 调用 moveBar 函数并设置颜色为红色
+});
+
+function moveBar(color = '#0984e3') { // 默认颜色为蓝色
+    let bar = document.querySelector('.bar');
+    let windowHeight = document.documentElement.clientHeight; // 视口高度
+    let totalHeight = document.body.scrollHeight; // 整个文档的总高度
+    let scrolled = window.pageYOffset || document.documentElement.scrollTop; // 已滚动的高度
+
+    let w = Math.ceil((scrolled / (totalHeight - windowHeight)) * 100); // 计算宽度百分比
+    bar.style.width = w + '%'; // 更新进度条宽度
+    bar.style.background = color; // 更新进度条颜色
+}
+</script>
\ No newline at end of file