조건부 적으로 div 에 class 붙이기

§

scrolltop오래전 부터 상단메뉴를 페이지 하단으로 내렸을때 메뉴를 윈도우 창 위에 붙게 해서 브라우저상에서 사라지지 않게 메뉴를 짜서 써 왔다.

사실 방식은 매우 간단하다.

jQuery 의 .scrollTop 을 이용 해서

http://api.jquery.com/scrollTop/

아래로 스크롤을 했을때 메뉴의 position  을 relative 에서 fixed 로 바꾸는 식이다.

그러니까 <div id=”menu”></div> 가 있다고 가정하면 여기에 조건부로 (if else) class 를 하나 더해주는 방식이다.

다시말해 스크롤의 위치에 따라서 <div id=”menu”></div> 를 <div id=”menu” class=”fixed”></div> 이런식으로 class 를 더 해주는 것 이다.

jQuery 에서 class 를 더해주는 것도 간단하다.  .addClass (더해주고), .removeClass (빼주고)

http://api.jquery.com/addClass/

 

이제 이걸 종합해 보자면,

$(window).scroll(function () {
if ($(window).scrollTop() &gt;= 88) { // 언제 메뉴를 relative 에서 fixed 로 바꿔야 하는지 결정해 줘야죠?
$('#menu').addClass('fixed');
} else {
$('#menu').removeClass('fixed');
}
});

이런 간결한 script 가 되는 것 이다.

상단메뉴의 경우, 이렇게 간단하게 scripting 을 해도 아무런 문제가 없지만, 페이지 오른쪽의 광고의 경우, 문제가 좀 복잡해진다.  하단에서 footer 가 올라오면서 이 고정된 div (position: fixed) 와 겹쳐지는 문제가 발생하는 것 이다.

그래서 footer 의 높이만큼 offset 을 다시 조건부적으로 계산을 해주는등, script 가 매우 복잡해진다. (사실 방법은 사람들 마다 다 다르게 한다.  if else 를 if, else if, else 이런식으로 하는 경우도 봤고, footer 의 높이를 수학적으로 계산 하는 방법등, 다들 다른식으로 이걸 해결한다.)

매우 복잡한 예를 본적도 있는데, 나의 script 실력상 이해하기도 힘들고, 그렇지 않아도 다른 script 들과 충돌문제도 걱정해야 하는데, 나의 방식으로 간결하게 이걸 짜보고 싶었다.

오늘 하루종일 고생 고생 끝에 이걸 구축해 놓긴 했는데, stackoverflow 의 도움으로 완성된 script 는 간결하지도 않고, 고정된 div 의 위치도, 위에 놓여있는 div 와 겹치기 까지 한다.

이걸 해결하기 위해 다시 padding 마진을 잡아줘야 하는 등, 여러가지로 만족스럽지가 않다.  더 삽질을 하려면 할수 있겠지만, 귀차니즘 + 시간도 없고, 대충 다른 div 와 겹치지만 않는 상태까지 만들어 두고 일단 손을 떼었다.

그리고 나서, 다른 개발자들은 이걸 어떻게 구현했을까 궁금해 져서 찾아보기 시작했는데… 두 둥…..

내가 구현하고 싶었던 동일한 기능의, 그것도 훨씬 더 좋은 기능의 플러그인들이 존재함을 알게 되었다.

http://davist11.github.io/jQuery-Stickem/

플러그인을 살펴보니 내가 이해가 되지 않는 부분들도 있지만, 암튼 무지 잘 만들어 놓았다는 건 이해가 되었다.

http://viget.com/about/team/tdavis

이렇게 생긴 친구다.  젊은 친구가 참 재주도 좋다.  오늘 하루종일 뭐한건지 모르겠다.  그냥 이거 가져다 썼으면 되는건데.. ㅠㅠㅠㅠ

hackya 는

Attorney, front-end developer, digital media artist, WordPress enthusiast, & a father of 4 wonderful children.

Tags: ,

카테고리: ,

Ω

Leave a Reply

Your email address will not be published. Required fields are marked *