잠실삼촌

페이지 height 길이 파악후 페이지 스크롤 해서 바 표현하기

· 2023-11-01 (수) 12:14:20 · 1508

 자작 소스이며 필요하신분은 응용해서 쓰세요  

 

     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>
            

 

|
댓글을 작성하시려면 로그인이 필요합니다.

개발자팁

5,403건

개발과 관련된 유용한 정보를 공유하세요. 질문은 QA에서 해주시기 바랍니다.

+
분류 제목 글쓴이 날짜 조회
PHP 24-01-19 조회 1,552
정규표현식 24-01-16 조회 2,416
JavaScript 23-12-28 조회 1,482
PHP 23-12-18 조회 4,140
PHP 23-12-17 조회 2,456
PHP 23-12-08 조회 1,446
node.js 23-12-05 조회 2,291
JavaScript 23-11-20 조회 1,973
JavaScript 23-11-20 조회 1,923
PHP
[PHP]
23-11-20 조회 3,039
JavaScript 23-11-19 조회 2,158
PHP 23-11-12 조회 1,566
JavaScript 23-11-11 조회 2,737
PHP 23-11-11 조회 1,431
jQuery 23-11-01 조회 1,509
JavaScript 23-10-31 조회 1,326
기타 23-10-05 조회 2,042
기타 23-10-01 조회 1,663
PHP 23-09-22 조회 4,040
JavaScript 23-09-16 조회 3,349
JavaScript 23-09-15 조회 3,678
JavaScript 23-09-14 조회 1,973
JavaScript
[JavaScript]
23-09-11 조회 1,457
PHP 23-09-08 조회 3,542
PHP 23-09-06 조회 2,949
JavaScript 23-09-05 조회 3,650
23-06-21 조회 2,742
23-06-01 조회 2,355
23-04-13 조회 2,035
23-04-11 조회 3,027