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

jQuery-CSS 200 09/09/2019

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

笔记点

scrollTop 的最大值+$(window).height()=$("html").height(); 也就是滑到底部 后,这个scrollTop与整体页面高度相差一个屏幕高!


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

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

代码思路


  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; }