반응형

 

다음 뉴스 기사를 보면,

스크롤을 내리면 상단에 바가 현재 스크롤의 위치만큼 움직인다.

나는 확실히 사용자 입장에서 네이버보다 다음이 기사 보기 편하다.

 

그래서 현재 브라우저의 스크롤의 위치를 퍼센트로 구할 수 있는 함수를 만들었다.

 

1
2
3
4
5
6
function getScrollPosition() {
    return Math.floor(($(window).scrollTop() / ($(document).height() - $(window).height())) * 100);
}
 
// 스크롤을 움직일때마다 해당 함수가 실행
$(window).scroll(getScrollPosition);
cs

 

코드는 간단하다.

브라우저에서 스크롤이 움직일 때마다, 함수가 실행되어서 해당 위치를 퍼센트로 구해주는 것이다.

 

 

그림에서 볼 수 있듯이, 스크롤이 움직이면서 해당 위치를 퍼센트로 구해준다.

이것을 css와 잘 조합하면, 다음에서 보여지는 것처럼 바 이동이 가능하다. (css는 못하기에 패스ㅜ.ㅜ)

 

그리고 유념해야하는 부분이 있는데

스크롤이 없는 브라우저에서는 값이 계산되지 않으니 이점 유념해서 예외처리 해주자.

 

 

반응형

+ Recent posts