스크롤 위치를 인식하여 나타나는 상단바
iTIPs/Web
2014. 9. 14. 23:49
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.
반면 현재 이 블로그에는 조금 다른 방식의 모바일 상단바가 적용되어있는데요.
스크롤을 내리면 사라졌다가 다시 조금 올리면 상단바가 나타납니다.
이런 방식의 상단바는 다음 링크를 참조해주세요.
아래로 스크롤하면 사라졌다가 위로 스크롤하면 나타나는 상단바
2014.09.19 21:54 신고
적용했습니다~ 좋은 내용 감사합니다! ^^
2014.12.15 14:45 신고
너무좋네요 ^^ 좋은팁 감사드립니다.
평소에 쓰던 스크립트보다 더 좋아보여서 쓰고있는데요
IE7에서만 상단바로 지정하면 위쪽여백이 조금 더 올라가서 따로놀고
하단바로 지정하면 아래쪽 여백이 더 내려가서 따로노는현상이있는데요.
이부분은 해결방법이 없을까요?
2014.12.15 15:48 신고
죄송하지만 이코드는 제가만든것도 아니고, IE7은 디버깅이 어려워서 해결이 어렵겠네요 ㅠㅠ
2014.12.15 16:19 신고
아닙니다 지원하는것만으로도 감사해야죠 ㅋㅋ
항상 글 잘보고있습니다. 잘쓰겠습니다.
2020.09.27 16:27
너무 좋은 코드 감사합니다. 한가지 문의 드려요. 혹시 소수점 뒷 숫자 없에는 법은 없을까요?