CSS로 스크롤 내비바 디자인하기

 구체적인 방법. 내비바(상단바)와 커버의 배경이 똑같다는 점이 키포인트!

스크롤시 줄어들되 일정 크기를 유지하는 fixed 스타일의 내비바를 디자인하는 법은 위와 같이 세 개의 레이블을 겹치는 것으로 구현할 수 있다. JS 없이 순수 css로도 가능하고 매우 간단해 호환성도 좋다.
네이버 모바일 블로그의 디자인이 최근 이와 정확히 같은 방식으로 세련되게 바뀌었는데 요소 분석을 해서 저런 구조를 알아낼 수 있었다. 사실 어떻게 이런 디자인이 가능한지 항상 궁금했고 우상적으로 생각했었는데 비밀을 풀어서 기쁘고 이런 아이디어가 다른 디자인으로도 충분히 나타날 수 있을 것이라는 가능성도 엿보았다. 필자의 블로그 디자인도 꾸준히 개발 중인데 이런 좋은 디자인을 참고하면 좋은 결과를 만들 수 있겠다.