뉴스기사 페이지 스크롤에 따른 퍼센트 보이는 기능 구현

일부 언론사의 기사 페이지에서처럼 조회한 양과 남은 스크롤 양(페이지 양)을 보여주는 기능을 구현했습니다.

 

<div class="cp1">
  <div id="MAIN_CONTENT">
<p>국무위원은 국정에 관하여 대통령을 보좌하며, 국무회의의 구성원으로서 국정을 심의한다. 국가는 평생교육을 진흥하여야 한다. 국무총리 또는 행정각부의 장은 소관사무에 관하여 법률이나 대통령령의 위임 또는 직권으로 총리령 또는 부령을 발할 수 있다.</p>

<p>모든 국민은 근로의 권리를 가진다. 국가는 사회적·경제적 방법으로 근로자의 고용의 증진과 적정임금의 보장에 노력하여야 하며, 법률이 정하는 바에 의하여 최저임금제를 시행하여야 한다.</p>

<p>명령·규칙 또는 처분이 헌법이나 법률에 위반되는 여부가 재판의 전제가 된 경우에는 대법원은 이를 최종적으로 심사할 권한을 가진다. 국정감사 및 조사에 관한 절차 기타 필요한 사항은 법률로 정한다.</p>

<p>국가는 사회보장·사회복지의 증진에 노력할 의무를 진다. 모든 국민은 신속한 재판을 받을 권리를 가진다. 형사피고인은 상당한 이유가 없는 한 지체없이 공개재판을 받을 권리를 가진다.</p>

<p>탄핵결정은 공직으로부터 파면함에 그친다. 그러나, 이에 의하여 민사상이나 형사상의 책임이 면제되지는 아니한다. 국가는 농지에 관하여 경자유전의 원칙이 달성될 수 있도록 노력하여야 하며, 농지의 소작제도는 금지된다.</p>

<p>한 회계연도를 넘어 계속하여 지출할 필요가 있을 때에는 정부는 연한을 정하여 계속비로서 국회의 의결을 얻어야 한다. 국가유공자·상이군경 및 전몰군경의 유가족은 법률이 정하는 바에 의하여 우선적으로 근로의 기회를 부여받는다.</p>

<p>감사위원은 원장의 제청으로 대통령이 임명하고, 그 임기는 4년으로 하며, 1차에 한하여 중임할 수 있다. 대통령은 국민의 보통·평등·직접·비밀선거에 의하여 선출한다.</p>

<p>모든 국민은 헌법과 법률이 정한 법관에 의하여 법률에 의한 재판을 받을 권리를 가진다. 대통령의 임기연장 또는 중임변경을 위한 헌법개정은 그 헌법개정 제안 당시의 대통령에 대하여는 효력이 없다.</p>

<p>대한민국은 통일을 지향하며, 자유민주적 기본질서에 입각한 평화적 통일 정책을 수립하고 이를 추진한다. 국가안전보장에 관련되는 대외정책·군사정책과 국내정책의 수립에 관하여 국무회의의 심의에 앞서 대통령의 자문에 응하기 위하여 국가안전보장회의를 둔다.</p>

<p>국가는 지역간의 균형있는 발전을 위하여 지역경제를 육성할 의무를 진다. 대통령은 법률안의 일부에 대하여 또는 법률안을 수정하여 재의를 요구할 수 없다.</p>

<p>이 헌법중 공무원의 임기 또는 중임제한에 관한 규정은 이 헌법에 의하여 그 공무원이 최초로 선출 또는 임명된 때로부터 적용한다. 헌법재판소의 조직과 운영 기타 필요한 사항은 법률로 정한다.</p>

<p>각급 선거관리위원회는 선거인명부의 작성등 선거사무와 국민투표사무에 관하여 관계 행정기관에 필요한 지시를 할 수 있다. 선거에 관한 경비는 법률이 정하는 경우를 제외하고는 정당 또는 후보자에게 부담시킬 수 없다.</p>

<p>국가는 농업 및 어업을 보호·육성하기 위하여 농·어촌종합개발과 그 지원등 필요한 계획을 수립·시행하여야 한다. 탄핵소추의 의결을 받은 자는 탄핵심판이 있을 때까지 그 권한행사가 정지된다.</p>

<p>교육의 자주성·전문성·정치적 중립성 및 대학의 자율성은 법률이 정하는 바에 의하여 보장된다. 대통령은 헌법과 법률이 정하는 바에 의하여 국군을 통수한다.</p>

<p>국회의원은 국가이익을 우선하여 양심에 따라 직무를 행한다. 국가는 재해를 예방하고 그 위험으로부터 국민을 보호하기 위하여 노력하여야 한다. 헌법에 의하여 체결·공포된 조약과 일반적으로 승인된 국제법규는 국내법과 같은 효력을 가진다.</p>

<p>군인·군무원·경찰공무원 기타 법률이 정하는 자가 전투·훈련등 직무집행과 관련하여 받은 손해에 대하여는 법률이 정하는 보상외에 국가 또는 공공단체에 공무원의 직무상 불법행위로 인한 배상은 청구할 수 없다.</p>

<p>나는 헌법을 준수하고 국가를 보위하며 조국의 평화적 통일과 국민의 자유와 복리의 증진 및 민족문화의 창달에 노력하여 대통령으로서의 직책을 성실히 수행할 것을 국민 앞에 엄숙히 선서합니다.</p>

<p>헌법재판소 재판관은 정당에 가입하거나 정치에 관여할 수 없다. 모든 국민은 고문을 받지 아니하며, 형사상 자기에게 불리한 진술을 강요당하지 아니한다.</p>

<p>제1항의 탄핵소추는 국회재적의원 3분의 1 이상의 발의가 있어야 하며, 그 의결은 국회재적의원 과반수의 찬성이 있어야 한다. 다만, 대통령에 대한 탄핵소추는 국회재적의원 과반수의 발의와 국회재적의원 3분의 2 이상의 찬성이 있어야 한다.</p>

<p>모든 국민은 종교의 자유를 가진다. 모든 국민은 법 앞에 평등하다. 누구든지 성별·종교 또는 사회적 신분에 의하여 정치적·경제적·사회적·문화적 생활의 모든 영역에 있어서 차별을 받지 아니한다.</p>
  </div>
</div>

 // scroll percentage

 var progressIndicator = '<div id="progress-indicator"></div>';
 $(".cp1").append(progressIndicator);

 $(".cp1").on("scroll", function() {

   // scrollTop : 현재 스크롤의 값을 반환해주는 API
   var currentPercentage =
     $(".cp1").scrollTop() / ($("#MAIN_CONTENT").outerHeight() - $(".cp1").height());

   var test = $("#progress-indicator").width(
     $(".cp1").outerWidth() * currentPercentage);

   // custom css. 상황에 맞게 조절
 /*   $("#progress-indicator").css("left", $("#leftPanel").outerWidth() + 5);
   $("#progress-indicator").css("bottom", "38px"); */
 });

#progress-indicator {
  position: fixed;
  top: 0;
  height: 6px;
  background: #5a9eec;
  width: 0%;
}

.cp1 {
  height: 300px;
  font-size: 0.95rem;
  overflow: scroll;
}

 

 

 

한글문단생성기

한글 Lorem Ipsum (간세네)