jQuery 一个简单基于文档高度百分比的进度条 | 2BROEAR 笔记栈

jQuery 一个简单基于文档高度百分比的进度条

笔记点

scrollTop 的最大值 (window).height()=(“html”).height(); 也就是滑到底部 后，这个scrollTop与整体页面高度相差一个屏幕高！

代码语言：javascript复制

var curSt = $(this).scrollTop(),
     curDocH = $(document).height(),
     curWinH = $(window).height(),
     WTF = curDocH-curWinH;

其中，基于当前窗口文档的滚动条y轴的值（WTF）就等于 当前文档高度（curDocH）- 当前窗口高度（curWinH），需要注意的是：滚动条默认从 当前窗口底部 开始计算到页面底部的滚动距离

代码思路

代码语言：javascript复制

function pagePercentage(){
     $(window).scroll(function(e){
	     var curSt = $(this).scrollTop(),  //滚动进行时 当前滚动位置y
		     curDocH = $(document).height(),  //滚动时 当前文档高度（与curHtmlH一致）
		     curWinH = $(window).height(),  //滚动时 动态获取窗口高度，防止窗口高度发生变化
		     winPer = ((curWinH/curDocH)*100),  //滚动时 当前窗口高度相对于当前文档高度的百分比
		     curHtmlH = $("html").height(), //..
		     WTF = curDocH-curWinH,  //滚动进行时 当前文档高度 - 当前窗口高度 = 真实滚动y轴位置...
		     pagePer = (((curSt 60)/WTF)*100).toFixed(2);  //curSt 60是为了兼容移动端浏览器的url地址栏高度不一致造成进度条走不满bug.

  	     //根据进度调整样式
	     function addition(){
		     let p_bar = $('.top-bar-tips span#doc-progress-bar');
		     p_bar.css({'width':pagePer '%'})
		     if(pagePer > 2.5){
			     p_bar.css('opacity','1')
		     }else{
			     p_bar.css("opacity","")
		     }
	     };addition();
     })
  };pagePercentage();

 进度条 CSS 样式 
.top-bar-tips span#doc-progress-bar{
    display: block;
    opacity: 0;
    width: 0%;
    height: 2px;
    background: #eb6844;
    position: absolute;
    z-index: 999;
    left: 0;bottom: -2px;
    transition: opacity .5s ease;
    box-shadow: 0 0 10px red;
  }

笔记 浏览器 移动端 jquery height

0 人点赞