스크롤 위치를 인식하여 나타나는 상단바

CodePen에서 현재 스크롤 위치를 인식하는 코드를 찾다가 발견했습니다.

먼저 스크롤 위치를 퍼센트로 나타내려면 다음처럼 jQuery를 사용하면 됩니다.

$(window).scroll(function(){

  scrollPercent = ($(window).scrollTop()/ ($(document).height()-$(window).height())) * 100;

});

다음은 이를 응용해 70% 스크롤을 했을 때 숨어있던 상단바가 내려오는 예제입니다.

70%이상 스크롤하면 상단바가 내려옵니다.

See the Pen Scroll detection by Kim young wook (@nubiz) on CodePen.

반면 현재 이 블로그에는 조금 다른 방식의 모바일 상단바가 적용되어있는데요.

스크롤을 내리면 사라졌다가 다시 조금 올리면 상단바가 나타납니다.

이런 방식의 상단바는 다음 링크를 참조해주세요.

아래로 스크롤하면 사라졌다가 위로 스크롤하면 나타나는 상단바