diff --git a/css/childTherapy.css b/css/childTherapy.css index 1c6b9cc..6266560 100644 --- a/css/childTherapy.css +++ b/css/childTherapy.css @@ -53,7 +53,12 @@ nav { justify-content: space-between; align-items: center; z-index: 100; - background-color: rgba(0, 0, 0, 0.4); + background-color: transparent; + transition: background-color 500ms ease-in-out; +} +.navOnscroll +{ + background-color: rgba(0, 0, 0, 0.4); backdrop-filter: blur(5px); } diff --git a/html/childTherapy.html b/html/childTherapy.html index c147f38..7529a20 100644 --- a/html/childTherapy.html +++ b/html/childTherapy.html @@ -1,118 +1,125 @@ - - - - - - - - - - Sukoon - Child Therapy - - - - - + + + + + + + + + + Sukoon - Child Therapy + + - - - -
-
-

IMAGES

-
-
- -
-
-
-
image
-
image
-
image
-
image
-
image
-
image
-
image
-
image
-
image
-
-
-
- +
+
+
+

IMAGES

+
+
+ +
+
+
+
image
+
image
+
image
+
image
+
image
+
image
+
image
+
image
+
image
+
+
+ +
- -
-
-
- + +
+ +
+

VIDEOS

@@ -120,16 +127,28 @@

VIDEOS

- +
- +
- +
- +
@@ -138,7 +157,7 @@

VIDEOS

- + - - + + + \ No newline at end of file diff --git a/html/childTherapy.js b/html/childTherapy.js index 422d23b..cd5b4c2 100644 --- a/html/childTherapy.js +++ b/html/childTherapy.js @@ -1,7 +1,21 @@ const ham = document.getElementById("ham"); const menu = document.getElementById("menu"); const close = document.querySelectorAll('.close'); - + const nav=document.querySelector("nav"); + + + window.addEventListener("scroll",()=> + { + if (document.body.scrollTop >= 50 || document.documentElement.scrollTop >= 50) + { + nav.classList.add("navOnscroll") + } + else + { + nav.classList.remove("navOnscroll") + } + }) + const closeMenu = () => { if (menu.classList.contains("open")) { menu.classList.remove("open"); @@ -60,4 +74,6 @@ const ham = document.getElementById("ham"); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; - } \ No newline at end of file + } + +