스크롤 프로그레스바 넣기(IE문제 수정 2019-03-28 15:22)

pc나 모바일로 다음 뉴스를 보실때 

스크롤을 내리면 상단에 작은 프로그레스바가 해당 문서의 어디를 보고 있는지 프로그레스바로 알려주는 걸 보여주는 소스입니다.

그누보드 베이직 테마 기준

head.php

[code]

include_once(G5_LIB_PATH.'/popular.lib.php');

?>

<!--상단시작 {-->

[/code]

부분 사이에

[code]

include_once(G5_LIB_PATH.'/popular.lib.php');

?>

<div style="width:0%;height:3px;background:#1f49ba;position:fixed;z-index:3000" id="progressBar">

</div>

<!--상단시작 {-->

[/code]

해당코드 삽입

그리고 임의의 위치에

[code]

<script>

$(function(){

$(window).scroll(function(){

var progress = ScrollporgressBar();

$('#progressBar').css("width",progress+'%');

});

function ScrollporgressBar(){

var maxY = document.documentElement.scrollHeight - document.documentElement.clientHeight;

return (window.scrollY / maxY) * 100;

}

})

</script>

[/code]

엄밀히 따지면, 그누보드 관련 팁은 아니지만 세로 스크롤이 긴 웹문서에는 유용하게 사용할 수 있을거라 생각됩니다

링크의 홈페이지에 가서 어떤식으로 동작하는지 확인해보세요

2019-03-28 15:22 추가내용

익스에서 동작 안된다는 내용을 받고 수정합니다.

windows.scrollY가 익스에선 지원되지 않습니다.

구형 IE브라우저에서 지원되는 함수로 변경

var scrollY = window.scrollY || document.documentElement.scrollTop;

[code]

function ScrollporgressBar(){

var maxY = document.documentElement.scrollHeight - document.documentElement.clientHeight;

var scrollY = window.scrollY || document.documentElement.scrollTop;

return (scrollY / maxY) * 100;

}

[/code]

ScrollporgressBar() 함수부분을 위와같이 바꿔주세요