Improve header scrolling smoothness

alanrme · Jul 1, 2024 · a8d9a02 · a8d9a02
1 parent 368e9c9
commit a8d9a02
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/css/style.scss b/css/style.scss
@@ -307,7 +307,7 @@ span.hu {
 			opacity: 0.2;
 
 			&.active {
-				transition: 0.15s linear transform;
+				transition: 0.15s linear;
 			}
 		}
 	}

diff --git a/js/main.js b/js/main.js
@@ -224,10 +224,20 @@ ready(() => {
             if (header) {
                 // if the element is at the top of the screen
                 if (rect.top < 0) {
-                    header.classList.add("sticky")
+                    header.classList.add("sticky")  
                     header.style.transform = `scale(10) translateX(${(rect.top) / (rect.bottom - rect.top)*70}%)`
+                    listenerF = (event) => {
+                        if (event.elapsedTime == 0.5) {
+                            event.target.classList.add("active")
+                            console.log("hi")
+                        } else {
+                            event.target.removeEventListener("transitionend", listenerF)
+                        }
+                    }
+                    header.addEventListener("transitionend", listenerF)
                 } else {
                     header.classList.remove("sticky")
+                    header.classList.remove("active")
                     header.style.transform = null
                 }
             }