Merge pull request #13 from yogesh2k21/main

Scroll Indicator is implemented
pulkithanda · Oct 10, 2021 · 9151cd0 · 9151cd0
2 parents 3e869f0 + c73c56a
commit 9151cd0
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 0 deletions.
diff --git a/assets/css/styles.css b/assets/css/styles.css
@@ -456,6 +456,18 @@ body.dark-theme {
   background-color: var(--text-color-light);
 }
 
+.progress-container {
+  width: 100%;
+  height: 5px;
+  /* background: #ccc; */
+}
+
+.progress-bar {
+  height: 5px;
+  background: #FDCB35;
+  width: 0%;
+}
+
 /*=============== MEDIA QUERIES ===============*/
 /* For small devices */
 @media screen and (max-width: 360px) {

diff --git a/assets/js/main.js b/assets/js/main.js
@@ -13,6 +13,16 @@ const showMenu = (toggleId, navId) =>{
 }
 showMenu('nav-toggle','nav-menu')
 
+/*=============== When the user scrolls the page, execute myFunction==============*/
+window.onscroll = function() {myFunction()};
+
+function myFunction() {
+  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+  var scrolled = (winScroll / height) * 100;
+  document.getElementById("myBar").style.width = scrolled + "%";
+}
+
 /*=============== REMOVE MENU MOBILE ===============*/
 const navLink = document.querySelectorAll('.nav__link')
 

diff --git a/index.html b/index.html
@@ -20,6 +20,9 @@
     <body>
         <!--=============== HEADER ===============-->
         <header class="header" id="header">
+            <div class="progress-container">
+                <div class="progress-bar" id="myBar"></div>
+              </div>  
             <nav class="nav container">
                 <a href="#" class="nav__logo"> Endless Navs </a>
 
@@ -219,5 +222,8 @@ <h3 class="footer__title">Community</h3>
 
         <!--=============== MAIN JS ===============-->
         <script src="assets/js/main.js"></script>
+        <script>
+
+            </script>
     </body>
 </html>