progressBar_Over_Form

make progress bar float over bootstrap form

by Hao Wu

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://rawgithub.com/jeremenichelli/scrollProgress/master/dist/scrollProgress.js"></script>
  <div class="progress-bar"></div>
<div class="container-fluid">
  <!-- main right col -->
  <div class="column col-sm-10 col-xs-11" id="main">

    <!-- content -->
    <!-- Query panel -->
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Subsidity Application</h3>
      </div>
      <div class="panel-body">
        <form class="form-horizontal">
          <div class="form-group">
            <label class="col-sm-3 control-label">Apply Date：</label>
            <div class="col-sm-9">
              <div class="input-group">
                <input id="person_sn" type="text" class="form-control" disabled="true" value="2017/09/19" />
              </div>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-3 control-label">Applyer：</label>
            <div class="col-sm-9">
              <div class="input-group">
                <input id="person_sn" type="text" class="form-control" disabled="true" />
              </div>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-3 control-label">IDNO：</label>
            <div class="col-sm-9">
              <div class="input-group">
                <input id="person_sn" type="text" class="form-control" disabled="true" />
              </div>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-3 control-label">BDATE：</label>
            <div class="col-sm-9">
              <div class="input-group">
                <input id="person_sn" type="text"...

CSS

/* scroll progress bar */

.progress-bar {
  overflow-y: auto;
  background-color: rebeccapurple;
  height: 10px;
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 999;
}

JavaScript

const progressElement = document.querySelector('.progress-bar');

const progressObserver = new ScrollProgress((x, y) => {
  progressElement.style.width = y * 100 + '%';
});