12-Scroll Trigger

codewithchu · codewithchu · commit 1740bc8f5abf · 2020-10-09T19:19:19.000-04:00
diff --git a/public/css/tailwind.css b/public/css/tailwind.css
@@ -21568,13 +21568,37 @@ a:hover {
     padding-bottom: 0;
   }
 
+  #mainMenu li a:hover {
+    --text-opacity: 1;
+    color: #feb2b2;
+    color: rgba(254, 178, 178, var(--text-opacity));
+  }
+
   #mainMenu li {
     margin-right: 1rem;
   }
 
   #mainMenu li:last-child {
     margin-right: 0;
   }
+
+  .stickyNav {
+    --bg-opacity: 1 !important;
+    background-color: #000 !important;
+    background-color: rgba(0, 0, 0, var(--bg-opacity)) !important;
+    padding-top: 0.75rem !important;
+    padding-bottom: 0.75rem !important;
+  }
+
+  .stickyNav logo {
+    height: 1.5rem !important;
+  }
+
+  .stickyNav #mainMenu li a:hover {
+    --text-opacity: 1;
+    color: #e53e3e;
+    color: rgba(229, 62, 62, var(--text-opacity));
+  }
 }
 
 /*footer*/
diff --git a/public/header.html b/public/header.html
@@ -14,7 +14,7 @@
             >
                 <div class="flex justify-between items-center w-full">
                     <h1>
-                        <a href="#">
+                        <a id="logo" href="#">
                             <span class="hidden">Boom</span>
                             <svg
                                 xmlns="http://www.w3.org/2000/svg"
@@ -53,6 +53,25 @@ <h1>
                 </ul>
             </nav>
         </header>
+
+        <div class="fixed z-30 bottom-0 right-0 mr-6 mb-6">
+            <a id="back2Top" href="#" class="hidden text-white bg-red-800 bg-opacity-50 rounded-md">
+                <span class="hidden">Back to Top</span>
+                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24" class="h-10 w-10">
+                    <path fill="currentColor" d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z" />
+                </svg>
+            </a>
+        </div>
+
+        <div class="h-screen-1/3 bg-teal-900"></div>
+        <div class="h-screen-1/3 bg-teal-800"></div>
+        <div class="h-screen-1/3 bg-teal-700"></div>
+        <div class="h-screen-1/3 bg-teal-600"></div>
+        <div class="h-screen-1/3 bg-teal-500"></div>
+        <div class="h-screen-1/3 bg-teal-400"></div>
+        <div class="h-screen-1/3 bg-teal-300"></div>
+        <div class="h-screen-1/3 bg-teal-200"></div>
+        <div class="h-screen-1/3 bg-teal-100"></div>
         <script src="./js/index.js"></script>
     </body>
 </html>
diff --git a/public/index.html b/public/index.html
@@ -14,7 +14,7 @@
             >
                 <div class="flex justify-between items-center w-full">
                     <h1>
-                        <a href="#">
+                        <a id="logo" href="#">
                             <span class="hidden">Boom</span>
                             <svg
                                 xmlns="http://www.w3.org/2000/svg"
@@ -53,6 +53,7 @@ <h1>
                 </ul>
             </nav>
         </header>
+
         <main>
             <!--Landing page Full Product Hero-->
             <section class="relative h-screen-2/3 lg:h-screen flex flex-col justify-end lg:flex-row lg:items-center">
diff --git a/public/js/index.js b/public/js/index.js
@@ -15,6 +15,20 @@ function toggleBurger() {
     });
 }
 
+window.addEventListener('scroll', (e) => {
+    if (window.scrollY >= 400) {
+        nav.classList.add('stickyNav');
+
+        back2Top.classList.remove('hidden');
+        back2Top.classList.add('block');
+    } else {
+        nav.classList.remove('stickyNav');
+
+        back2Top.classList.remove('block');
+        back2Top.classList.add('hidden');
+    }
+});
+
 mobileMenu.addEventListener('click', (e) => {
     e.preventDefault();
 
diff --git a/src/css/tailwind.css b/src/css/tailwind.css
@@ -72,12 +72,25 @@ a:hover {
     #mainMenu li a {
         @apply py-0;
     }
+    #mainMenu li a:hover {
+        @apply text-red-300;
+    }
     #mainMenu li {
         @apply mr-4;
     }
     #mainMenu li:last-child {
         @apply mr-0;
     }
+
+    .stickyNav {
+        @apply bg-black py-3 !important;
+    }
+    .stickyNav logo {
+        @apply h-6 !important;
+    }
+    .stickyNav #mainMenu li a:hover {
+        @apply text-red-600;
+    }
 }
 /*footer*/
 footer ul li h4 {
