페이지 height 길이 파악후 페이지 스크롤 해서 바 표현하기 정보
jQuery 페이지 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>
1
댓글 0개