페이지 height 길이 파악후 페이지 스크롤 해서 바 표현하기
자작 소스이며 필요하신분은 응용해서 쓰세요
jQuery(window).on("scroll", function(){
var scroll_top=jQuery(this).scrollTop();
var Wheight = jQuery(window).height();
var BodyHeight=jQuery("body").height();
var WBheight=Math.ceil(eval(scroll_top)+eval(Wheight));
var percent = Math.ceil(WBheight/BodyHeight * 100);
//alert(WBheight+"="+percent+"//"+Wheight);
if(scroll_top > 100){
jQuery(".headers_bar_line").show();
jQuery(".headers_bar").attr("style","height:4px; background:#fff;");
jQuery(".headers_bar").attr("style","top:4px; box-shadow: 0 0 4px #ccc; height:50px; border-radius:0px 0px 10px 10px;");
jQuery(".headers_bar_lines").attr("style","width:"+percent+"%; height:4px; background:#03a776;");
}else{
jQuery(".headers_bar_line").hide();
jQuery(".headers_bar").attr("style","top:70px; height:60px; border-radius:10px;");
}
});
<div class="headers_bar" onclick="javascript:headers_barScript();">
<div class="headers_bar_line"><div class="headers_bar_lines"></div></div>
</div>
게시판 목록
개발자팁
질문은 QA에서 해주시기 바랍니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 5366 | 기타 |
nekoieye
|
1년 전 | 1110 | |
| 5365 | PHP | 1년 전 | 769 | ||
| 5364 | JavaScript | 1년 전 | 519 | ||
| 5363 | JavaScript | 1년 전 | 984 | ||
| 5362 | 1년 전 | 1222 | |||
| 5361 | JavaScript | 1년 전 | 1231 | ||
| 5360 |
그누보드이해하기
|
1년 전 | 769 | ||
| 5359 | 1년 전 | 1085 | |||
| 5358 | 1년 전 | 1089 | |||
| 5357 | 1년 전 | 802 | |||
| 5356 | 1년 전 | 363 | |||
| 5355 |
|
1년 전 | 581 | ||
| 5354 | 1년 전 | 1053 | |||
| 5353 |
|
1년 전 | 699 | ||
| 5352 |
|
1년 전 | 633 | ||
| 5351 | PHP | 1년 전 | 801 | ||
| 5350 | PHP | 1년 전 | 568 | ||
| 5349 | OS | 1년 전 | 642 | ||
| 5348 | 기타 | 1년 전 | 446 | ||
| 5347 | 기타 | 1년 전 | 624 | ||
| 5346 | 기타 | 1년 전 | 502 | ||
| 5345 | 기타 | 1년 전 | 393 | ||
| 5344 | JavaScript |
|
1년 전 | 422 | |
| 5343 | PHP |
|
1년 전 | 492 | |
| 5342 | jQuery | 1년 전 | 568 | ||
| 5341 | PHP |
|
1년 전 | 870 | |
| 5340 | Mobile |
슈퍼스타맨
|
1년 전 | 544 | |
| 5339 | 기타 |
|
1년 전 | 544 | |
| 5338 |
멀티트리플
|
2년 전 | 1287 | ||
| 5337 | 기타 |
슈퍼스타맨
|
2년 전 | 1779 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기