[jQuery] 스크롤 위치에 따라 클래스 추가, 삭제하기

이미지와 같이 스크롤 위치에 따라 상단바의 강조 메뉴 또한 바뀌어야 한다.

 

<li id ="header-menu-hero" class="menu-active"><a href="#hero">HOME</a></li>
<li id ="header-menu-about"><a href="#about">ABOUT US</a></li>
<li id ="header-menu-history"><a href="#history">HISTORY</a></li>
<li id ="header-menu-contact"><a href="#contact">CONTACT US</a></li>
<li class="menu-has-children"><a href="">COMMUNITY</a>

메뉴에 따라 id를 설정해준다. 여기서 삽입, 삭제할 class는 "menu-active" 이다.

 

hero = $('#hero').position().top;
about = $('#about').position().top - 500;
hhistory = $("#history").position().top - 500;
contact = $('#contact').position().top - 700;

$(window).scroll(function() {
var scroll = $(window).scrollTop();

if (scroll < about) 
{
  $("#header-menu-hero").addClass("menu-active");
  $("#header-menu-about").removeClass("menu-active");
} 
else if (about <= scroll && scroll< hhistory) 
{
  $("#header-menu-hero").removeClass("menu-active");
  $("#header-menu-about").addClass("menu-active");
  $("#header-menu-history").removeClass("menu-active");
} 
else if (hhistory <= scroll && scroll < contact) 
{
  $("#header-menu-about").removeClass("menu-active");
  $("#header-menu-history").addClass("menu-active");
  $("#header-menu-contact").removeClass("menu-active");
}
else if (contact <= scroll)
{
  $("#header-menu-history").removeClass("menu-active");
  $("#header-menu-contact").addClass("menu-active");
}

jQuery 전체 코드는 이런 식으로 구성되어 있다. 딱 봐도 잘 짠 코드는 아니지만... 이 방법이 가장 쉽다.

 

position() 함수를 사용해 해당 id를 기준으로 스크롤의 위치를 알아낸다.

이때 top을 꼭 붙여주어야 한다. 위쪽 기준으로 위치를 잡아야 하는데, 엉뚱한 위치부터 계산될 수도 있다.

이전 섹션에서 다음 섹션으로 스크롤이 넘어갈 때 반 이상 넘어간 경우 다음 위치로 간다는 것을 알 수 있으므로 숫자를 조금씩 조정해주었다.

 

조건문을 이용해 현재 스크롤 위치가 섹션 위치에 있을 경우, 클래스를 추가하고 삭제하는 구문을 넣어준다.

2, 3번째 조건문에서 removeClass가 두 개씩 있는 이유는 스크롤이 밑에서 위로 올라갈 때도 고려해주었기 때문이다.

 

적용하면 이런 식으로 위치에 따라 상단바 강조 메뉴가 바뀌는 것을 확인할 수 있다.

 

분명 이것보다 더 깔끔하고 좋은 방법이 있지만, 단순하게 표현하기에는 이 방법이 제일인 것 같다.