feat: header 페이지 js 작업 완료

이미지경로 변경, 메인페이지에서 스크롤 내릴시 헤더의 배경색이 블랙으로 바뀌는 기능 추가 Related to: javascript-project-3#28
HYHYJ · Aug 2, 2023 · f8f120f · f8f120f
1 parent f9acc94
commit f8f120f
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 4 deletions.
diff --git a/client/header.html b/client/header.html
@@ -5,7 +5,7 @@
     <h1 class="logo h-[36px] w-[132px] s:w-[80px]">
       <a
         href="./"
-        class="logo__link block h-full w-full bg-[center_100%] bg-no-repeat s:bg-[length:46px_15px] s:bg-center  m:bg-center l:bg-center m:bg-[length:77px_24px] bg-[url('/image/header/Logo_1.png')]"
+        class="logo__link block h-full w-full bg-[center_100%] bg-no-repeat s:bg-[length:46px_15px] s:bg-center  m:bg-center l:bg-center m:bg-[length:77px_24px] bg-[url('./../image/header/Logo_1.png')]"
 
         aria-label="TAING"
       ></a>
@@ -58,7 +58,7 @@ <h2 class="sr-only">메인 메뉴</h2>
         <legend class="sr-only">검색</legend> 
           <a
             href="./search.html"
-            class="searchForm__button hover:brightness-0 hover:invert-[1] cursor-pointer border-none p-0 block l:h-[2.4rem] l:w-[2.4rem] bg-[center_100%] bg-no-repeat opacity-70 s:bg-center m:bg-center l:bg-center bg-cover s:w-[20px] s:h-[20px] m:w-[28px] m:h-[28px] bg-[url('/image/header/Search.svg')] "
+            class="searchForm__button hover:brightness-0 hover:invert-[1] cursor-pointer border-none p-0 block l:h-[2.4rem] l:w-[2.4rem] bg-[center_100%] bg-no-repeat opacity-70 s:bg-center m:bg-center l:bg-center bg-cover s:w-[20px] s:h-[20px] m:w-[28px] m:h-[28px] bg-[url('./../image/header/Search.svg')] "
 
             ><span class="sr-only">검색</span></a
           >
@@ -71,7 +71,7 @@ <h2 class="sr-only">메인 메뉴</h2>
     <div class="userInfo relative">
       <button
         type="button"
-        class="userInfo__button block cursor-pointer border-none p-0 l:w-[2.4rem] l:h-[2.4rem] bg-center bg-no-repeat s:w-[18px] s:h-[18px] m:w-[24px] m:h-[24px]  bg-cover bg-[url('/image/header/Profile.svg')]"
+        class="userInfo__button block cursor-pointer border-none p-0 l:w-[2.4rem] l:h-[2.4rem] bg-center bg-no-repeat s:w-[18px] s:h-[18px] m:w-[24px] m:h-[24px]  bg-cover bg-[url('./../image/profile/mobile/profile_진.png')]"
 
       ></button>
       <!-- invisible 추가-->

diff --git a/client/js/header.js b/client/js/header.js
@@ -19,4 +19,15 @@ function handleRemoveUserbar(e) {
 }
 
 userProfile.addEventListener("click", handleUserBar);
-document.addEventListener("mouseup", handleRemoveUserbar);
+window.addEventListener("mouseup", handleRemoveUserbar);
+
+//스크롤을 내리면 해더의 배경이 검정으로 바뀐다.----------------------------------
+window.addEventListener("scroll", function () {
+  const banner = getNode(".mainBanner");
+  const bannerHeight = banner.getBoundingClientRect().height;
+  if (window.scrollY > bannerHeight) {
+    getNode("#scrollHeader").style.backgroundColor = "black";
+  } else {
+    getNode("#scrollHeader").style.backgroundColor = "transparent";
+  }
+});