position: fixed 주의

CSS

Position: fixed

웹 페이지를 만들 때, 네비게이션 메뉴를 position: fixed로 하는 경우가 많다. 왜냐하면 스크롤이 있는 페이지일 경우에 스크롤하면 메뉴를 상단에 고정시려고 하기 때문이다.
fixed라는 게 데스크탑에서는 크게 문제되지 않지만, 모바일(하나의 스크롤이 있는 페이지는 괜찮지만, 클릭 이벤트로 다른 페이지를 부르는… 특히 모바일에서…)에서는 약간 문제가 된다.
(모바일 브라우저에서는 막지 못한다. 크롬 브라우저는 스크롤하면 브라우저 상단이 함께 내려와서 괜찮지만, 사파리에서는 스크롤하면 뒷 배경을 보여준다. 나 같은 경우에도 사파리에서 문제가 심각했다…)
아래 이미지는 position: fixed를 사용한 header를 모바일에서 위로 계속 스크롤했을 때 발생한다.
header가 원래는 흰 부분과 검은색 부분이었으나, 위로 계속 스크롤할 경우 아래 이미지처럼 header 부분이 흰 부분으로 사라지게 된다. 참고로 노란색은 content가 들어가는 부분이다.

해결 방법

나는 이 문제를 너무 힘들게 해결했다. 일단 header에 position: fixed를 relative나 absolute로 수정하고, 모든 페이지를 테스트하며 수정했다. 그런데, 여기서 중요한 점은 스크롤할 때에는 fixed이어야 한다. 그래야 페이지 상단에 메뉴가 고정되어 보일테니까…

.header {
 ...
 position: absolute;
}

componentDidMount() {
 window.addEventListener('scroll', this._handlescroll);
}

_handlescroll(e) {
 if (e.currentTarget.pageYOffset === 0) {
  this.setState({ fixedPosition: false });
 } else {
  this.setState({ fixedPosition: true });
 }
}

<header
 ...
 style={{ position: fixedPosition && 'fixed' }}
>

스크롤되어 Y축(세로)이 0이면 absolute로 하고, 0이 아닐 경우에는 fixed로 하면, 모바일에서도 이상없이 잘 보인다!