Adding scroll bar

src/js/App.js

@@ -104,4 +104,15 @@ export default {
     var AOS = require("aos");
     AOS.init({ duration: 1000, once: false, useClassNames: true });
   },
+  scrollBar: () => {
+    $(window).on("load scroll resize", function () {
+      let top = $(window).scrollTop();
+      let height = $(document).height();
+      let windowheight = $(window).height();
+      let width = (top / (height - windowheight)) * 100;
+      $("#line-scroll").css({
+        width: width + "%",
+      });
+    });
+  },
 };

src/main.js

@@ -8,6 +8,7 @@ window.addEventListener("DOMContentLoaded", async (event) => {
   App.bootstrapify();
   App.lazyload();
   App.loadFontAwesome();
-  App.navbarFade();
+  // App.navbarFade();
   App.aos();
+  App.scrollBar();
 });

src/scss/scroll-bar.scss

@@ -0,0 +1,9 @@
+.line-scroll {
+    background-image: linear-gradient(90deg, rgba(238,136,5,1) 0%, rgba(191,48,48,1) 41%, rgba(209,28,28,1) 100%);
+    height: 5px;
+    left: 0;
+    top: 63px;
+    position: fixed;
+    width: 0;
+    z-index: 10;
+  }

src/scss/styles.scss

@@ -6,4 +6,5 @@
 @import "search";
 @import "search-bar";
 @import "toc";
+@import "scroll-bar";
 @import "fonts";