[Wecode] Javascript를 이용한 Mypage 기술구현

1. scroll위치에 따른 navbar 색상변경기능

1) scrollY값 구하기

페이지 자체에 EventListener를 추가해 스크롤 할 때마다 스크롤의 Y값(세로)의 위치를 콘솔에 찍어서 scrollY의 값을 구한다

document.addEventListener("scroll", () => {
  console.log(scrollY);
});

2) navbar의 배경색과 글자색 변경하기

if를 이용해 scroll이 최상단 즉, scrollY값이 0일때는 배경을 검정, 글자는 흰색으로 하고, scrollY값이 0보다 클 때, 즉 스크롤을 조금이라도 내렸을 때는 배경을 흰색, 글자를 검정으로 하는 함수를 만들고, 페이지 내에서 scroll을 할 때 해당 함수를 호출하는 식을 만든다.

const navbar = document.getElementById("header"); // navbar를 선언

document.addEventListener("scroll", navbarColorChange); // scroll시 navbarColorChange함수가 실행되도록 선언

function navbarColorChange() {
	if(scrollY > 0) { // 스크롤이 최상단일 때
    navbar.style.backgroundColor = "black";
    navbar.style.color = "white";
    } else { // 스크롤을 내렸을 때
    navbar.style.backgroundColor = "white";
    navbar.style.color = "black";
    }
}

3) 개선해야 할 부분

1. 버튼색은 기본적으로 회색의 배경색을 가지기에 css를 통해 흰색으로 변경함
2. css가 우선적으로 적용되다보니 navbar부분 전체만 함수에 넣어도 button들의 색은 변경되지 않음
3. 그렇기 때문에 button 하나하나를 선언해주어 함수에 넣다보니 가독성이 떨어짐
4. 여러 개를 개별로 적용시켰기에 추후 색상변경 시 개별로 변경해야 하기 때문에 유지보수 측면에서도 바람직하지 않음

2. button클릭 시 원하는 페이지 위치로 이동하는 기능

1) scrollY값을 구하기

상단과 같은 로직으로 scrollY값을 구해준다.

2) button에 EventListener 추가하기

3개의 버튼에 EventListener를 추가해준다. (버튼 클릭 시 지정한 이벤트가 실행되는 로직을 구현하기 위해)

const introduce = document.getElementById("introduce_introduce");
const mbti = document.getElementById("introduce_mbti");
const wish = document.getElementById("introduce_wish");

introduce.addEventListener("click", introduceGo);
mbti.addEventListener("click", mbtiGo);
wish.addEventListener("click", wishGo);

3) scrollTo를 사용해 지정한 scroll위치로 이동

각각의 버튼에 scrollTo 함수를 사용해 지정 위치로 이동시킬 수 있다.

scrollTo({top: 이동할 scrollY값, behavior:"원하는 동작"})

const introduce = document.getElementById("introduce_introduce");
const mbti = document.getElementById("introduce_mbti");
const wish = document.getElementById("introduce_wish");

introduce.addEventListener("click", introduceGo);
mbti.addEventListener("click", mbtiGo);
wish.addEventListener("click", wishGo);

function introduceGo() {
  window.scrollTo({ top: 0, behavior: "smooth" });
} // 최상단에 소개페이지이기 때문에 top을 0으로 두고
// 이동할 때 부드럽게 이동하기 위해 behavior의 값을 smooth로 준다.

function mbtiGo() {
  window.scrollTo({ top: 920, behavior: "smooth" });
} // mbti의 scrollY값은 920이기 때문에 top에서 920만큼 떨어진 위치로 이동

function wishGo() {
  window.scrollTo({ top: 2000, behavior: "smooth" });
} // wish부분은 아직 디테일한 구현을 하지 않아서 최하단인 2000으로 이동

3. 기타 css로 구현한 기능

Javascript 기능은 아니나 최근의 웹페이지에서 많이 사용하는 기능이라 추가해본다.

1) navbar 상단에 항상 붙혀놓는 기능

#header {
position: sticky;
top: 0; // top에서 0의 위치, 즉 최상단의 위치에 sticky(붙힌다)를 사용해 최상단에 붙힐 수 있다.
}

2) navbar 색상 전환 시 속도를 조절할 수 있는 기능

#header {
transition: 0.3s; // 0.3초에 걸쳐 색상전환을 하게 함
}