페이지 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에서 해주시기 바랍니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 5216 | 2년 전 | 950 | |||
| 5215 | 2년 전 | 1083 | |||
| 5214 | 2년 전 | 724 | |||
| 5213 | PHP |
swallow
|
2년 전 | 669 | |
| 5212 | PHP |
swallow
|
2년 전 | 1693 | |
| 5211 | PHP |
swallow
|
2년 전 | 1455 | |
| 5210 | PHP |
swallow
|
2년 전 | 2142 | |
| 5209 | PHP | 2년 전 | 692 | ||
| 5208 | JavaScript |
swallow
|
2년 전 | 830 | |
| 5207 | JavaScript |
swallow
|
2년 전 | 682 | |
| 5206 | JavaScript |
swallow
|
2년 전 | 604 | |
| 5205 | PHP |
|
2년 전 | 696 | |
| 5204 | 기타 |
techstar
|
2년 전 | 749 | |
| 5203 | JavaScript |
swallow
|
2년 전 | 576 | |
| 5202 | JavaScript |
swallow
|
2년 전 | 604 | |
| 5201 | JavaScript |
swallow
|
2년 전 | 667 | |
| 5200 | JavaScript |
swallow
|
2년 전 | 857 | |
| 5199 | JavaScript | 2년 전 | 619 | ||
| 5198 | 기타 |
swallow
|
2년 전 | 651 | |
| 5197 | PHP |
swallow
|
2년 전 | 731 | |
| 5196 | JavaScript |
swallow
|
2년 전 | 597 | |
| 5195 | PHP |
swallow
|
2년 전 | 2051 | |
| 5194 | PHP |
swallow
|
2년 전 | 612 | |
| 5193 | 기타 |
swallow
|
2년 전 | 662 | |
| 5192 | MySQL |
swallow
|
2년 전 | 1382 | |
| 5191 | JavaScript |
swallow
|
2년 전 | 1071 | |
| 5190 | PHP |
swallow
|
2년 전 | 1924 | |
| 5189 | MySQL |
swallow
|
2년 전 | 6183 | |
| 5188 | node.js |
swallow
|
2년 전 | 1040 | |
| 5187 | node.js |
swallow
|
2년 전 | 788 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기