페이지 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에서 해주시기 바랍니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 5336 | 1년 전 | 952 | |||
| 5335 | 1년 전 | 974 | |||
| 5334 | 1년 전 | 884 | |||
| 5333 | 1년 전 | 714 | |||
| 5332 |
바다클라우드
|
1년 전 | 3643 | ||
| 5331 |
뽕엄능브라
|
1년 전 | 1670 | ||
| 5330 | 1년 전 | 1328 | |||
| 5329 |
|
1년 전 | 2650 | ||
| 5328 | 1년 전 | 2453 | |||
| 5327 | 1년 전 | 3644 | |||
| 5326 | 1년 전 | 1547 | |||
| 5325 | JavaScript |
|
1년 전 | 687 | |
| 5324 | OS | 1년 전 | 752 | ||
| 5323 | PHP |
|
1년 전 | 892 | |
| 5322 | PHP |
|
1년 전 | 789 | |
| 5321 | PHP |
|
1년 전 | 648 | |
| 5320 | PHP |
|
1년 전 | 753 | |
| 5319 | PHP |
techstar
|
1년 전 | 799 | |
| 5318 | JavaScript |
|
1년 전 | 665 | |
| 5317 | PHP |
|
1년 전 | 611 | |
| 5316 | PHP |
|
1년 전 | 574 | |
| 5315 | PHP |
|
1년 전 | 685 | |
| 5314 | PHP |
|
1년 전 | 665 | |
| 5313 | PHP |
techstar
|
1년 전 | 764 | |
| 5312 | 정규표현식 |
|
1년 전 | 642 | |
| 5311 | JavaScript |
|
1년 전 | 702 | |
| 5310 | PHP |
|
1년 전 | 2117 | |
| 5309 | PHP |
techstar
|
1년 전 | 1605 | |
| 5308 | PHP |
techstar
|
1년 전 | 673 | |
| 5307 | node.js |
swallow
|
1년 전 | 1427 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기