스크롤 프로그레스바 넣기(IE문제 수정 2019-03-28 15:22) > 그누보드5 팁자료실

그누보드5 팁자료실

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

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

본문

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

 

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

 

그누보드 베이직 테마 기준

 

 

head.php


include_once(G5_LIB_PATH.'/popular.lib.php');
?>
 
<!--상단시작 {-->

 

부분 사이에

 


include_once(G5_LIB_PATH.'/popular.lib.php');
?>
<div style="width:0%;height:3px;background:#1f49ba;position:fixed;z-index:3000" id="progressBar">
</div>
<!--상단시작 {-->

 

해당코드 삽입

 

그리고 임의의 위치에

 


<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>

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 


function ScrollporgressBar(){
var maxY = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrollY = window.scrollY || document.documentElement.scrollTop;
return (scrollY / maxY) * 100;
}

 

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

추천
9

댓글 9개

게시글에도 유용하지만, 특히나 쇼핑몰 상품페이지에서 사용하면 만족도가 더 높아질 듯 합니다. 좋은 정보 감사합니다^^
임의의 위치에 스크립트를 넣으라는 것은...
head.php 파일내 임의의 위치를 말하시나요?
아니면 어디를 말하는 건가요?
조금더 구체적으로 알려주시면 감사하겠습니다.

저는 head.php 내 넣었는데 안나오네요...ㅠㅠ
전체 2,412 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT