feat(blur-header): add js scipt for blur effect

Added js scrip for header scroll blur effect in assets/js/main.js
rasan3-1416 · Oct 6, 2023 · fa0995f · fa0995f
1 parent f8e1298
commit fa0995f
Showing 1 changed file with 6 additions and 5 deletions.
diff --git a/assets/js/main.js b/assets/js/main.js
@@ -22,12 +22,13 @@ const linkAction = () => {
     navMenu.classList.remove('show-menu')
 }
 navLink.forEach(n => n.addEventListener('click', linkAction))
-/*=============== REMOVE MENU MOBILE ===============*/
-
-
 /*=============== ADD BLUR HEADER ===============*/
-
-
+const blurHeader = () => {
+    const header = document.getElementById('header')
+    /* When the scroll is greater then 50 viewport height add the blur-header class in header */
+    this.scrollY >=50 ? header.classList.add('blur-header'):header.classList.remove('blur-header')
+}
+window.addEventListener('scroll', blurHeader)
 /*=============== SWIPER FAVORITES ===============*/