jquery文章阅读时间进度条预览例子

*{margin:0; padding: 0;}
  body{
   padding: 10px;
  }
  #box{
   width:500px;
   position: fixed;
   height: 30px;
   top:0;
   display: none;
  }
  #boxbar{
   position: relative;
   background: #ccc;height: 30px;
  }
  #boxbar div{
   position: absolute;
  }
  .red{background: red; height: 15px; z-index: 2;  top: 0; width:1%;}

  #head{
   height: 50px;
  }
  p{line-height: 4em;}

$(function() {

   //游记内容高度
   var docH = $('#doc').outerHeight()">endY ){
     $('#box').hide();            
    }else{
     $('#box').show();
     var barP = ( (scroll_top - beginY)  / docH )* 100 + '%'; //beginY=从初始位置
     $('#bar').css({width:barP})     
    }
   }

            $(window).scroll(function () {
    var scroll_top = $(this).scrollTop();
    //todo 需做节流处理
    showTools(scroll_top);
            });

  });