Added a Page Scroll Progress Bar at the Top of Your Startup Webpage

jfmartinz · Jun 29, 2024 · 713bbce · 713bbce
1 parent 26e83f2
commit 713bbce
Showing 1 changed file with 121 additions and 3 deletions.
diff --git a/new-website/index.html b/new-website/index.html
@@ -22,6 +22,26 @@
 
     <link rel="icon" href="assets/logo.png">
 
+<style>
+    @charset "UTF-8";
+/**
+ *
+ * @authors Ted Shiu ([email protected])
+ * @date    2014-03-02 00:16:13
+ * @version $Id$
+ */
+
+.scroll_progress {
+    position: fixed;
+    overflow: hidden;
+}
+.scroll_progress div {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+</style>
+
 
     <script>
         tailwind.config = {
@@ -33,15 +53,104 @@
 </head>
 
 <body class="bg-white dark:bg-black dark:text-white">
-    <!-- Progress Bar -->
+    <!-- Progress Bar 
     <div id="progressBar"></div>
     <script>
-      window.onscroll = function() {
+        for (var i = 1; 100 >= i; i++) {
+            var li = document.createElement('li');
+            li.innerHTML = '<img src="" alt="img" width="90" height="90"><span>'+i+'</span>';
+            document.querySelector('ul').appendChild(li);
+        };
+    </script>-->
+    <script>
+      /*window.onscroll = function() {
         var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
         var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
         var scrolled = (winScroll / height) * 100;
         document.getElementById("progressBar").style.width = scrolled + "%";
-      };
+      };*/
+      /*global $, jQuery, alert, console, angular*/
+/**
+ *
+ * @authors Ted Shiu ([email protected])
+ * @date    2014-03-01 23:51:21
+ * @version $Id$
+ */
+
+function ScrollProgress (option) {
+    console.log('init');
+    var d4 = {
+        position: 'top',
+        thick: 5,
+        color: 'red'
+    };
+    var percent;
+    var dom = document.querySelector('body'),
+        progress = document.createElement('div'),
+        div = document.createElement('div');
+
+    option = option || {};
+    option.position = option.position || d4.position;
+    option.thick = option.thick || d4.thick;
+    option.color = option.color || d4.color;
+
+    // init position
+    switch(option.position) {
+        case 'top':
+            progress.style.top = 0;
+            progress.style.left = 0;
+            progress.style.width = '100%';
+            progress.style.height = option.thick + 'px';
+            div.style.height = '100%';
+        break;
+        case 'bottom':
+            progress.style.bottom = 0;
+            progress.style.left = 0;
+            progress.style.width = '100%';
+            progress.style.height = option.thick + 'px';
+            div.style.height = '100%';
+        break;
+        case 'left':
+            progress.style.top = 0;
+            progress.style.left = 0;
+            progress.style.width = option.thick + 'px';
+            progress.style.height = '100%';
+            div.style.width = '100%';
+        break;
+        case 'right':
+            progress.style.top = 0;
+            progress.style.right = 0;
+            progress.style.width = option.thick + 'px';
+            progress.style.height = '100%';
+            div.style.width = '100%';
+        break;
+        default:
+        return;
+    }
+
+    // detect scroll progress
+    window.addEventListener('scroll', function() {
+        if (dom.scrollTop) {
+            percent = (dom.scrollTop/(dom.scrollHeight - document.documentElement.clientHeight))*100 + '%';
+        } else {
+            percent = (window.pageYOffset/(dom.scrollHeight - document.documentElement.clientHeight))*100 + '%';
+        }
+        if (option.position === 'top' || option.position === 'bottom') {
+            div.style.width = percent;
+        }
+        if (option.position === 'left' || option.position === 'right') {
+            div.style.height = percent;
+        }
+    });
+
+    div.style.backgroundColor = option.color;
+    progress.setAttribute('class', 'scroll_progress');
+    progress.appendChild(div);
+    dom.appendChild(progress);
+}
+
+window.ScrollProgress = ScrollProgress;
+
     </script>
 
     <!-- NAVBAR -->
@@ -453,4 +562,13 @@ <h2 class="footer-title">ResourceHub</h2>
         </script>
 </body>
 
+<script>
+    var setting = {
+        position: 'left',
+        thick: 10,
+        color: '#ff8800'
+    }
+    // ScrollProgress(setting);
+    ScrollProgress();
+</script>
 </html>