# 前言
后续又发现两个问题：
- 当整个页面内容高度不足，往下拖动时页面底部会闪烁回弹
- 页面百分比进度显示不大准确
# 标签页回弹问题
回家预览了下，发现页面内容高度不足会有显示问题，例如标签页会变得比较鬼畜：页面无法拉到底，底部的评论及网站底部一闪一闪的：
调试了一下，找到了 global.js 中的 scrollHandle 方法中计算导致的。
它会为 sidebar 增加一个 affix 的 class，存在时会显示页面下方的元素，否则就会隐藏。
<div id="sidebar" class="affix" style=""> |
不知道为啥在我这反复横跳，造成了这种闪烁的结果。
其对应代码如下：
sideBar.toggleClass('affix', window.pageYOffset > headerHight && document.body.offsetWidth > 991) |
看判断条件，结合实际情况，宽度因素可以排除：那么就是恐怕就是这个高度判断出了啥问题吧？
- window.pageYOffset = 当前页面相对于窗口垂直方向滚动的像素
- headerHight=header 高度 + waves 高度 (就那个波纹特效高度)
这里的逻辑估计是想：如果滚动高度超过整个页面的头部，那就显示底部区域，否则隐藏 (实际上元素只是看不见而已，东西还是在原地的)。
所以不知道这个具体用来处理啥情况的，但毕竟我这出问题了，只能减小该值。改成 window.pageYOffset > headerHightInner 就好了。
这样改是不对的， 过了两天 发现不行，单纯修改这个高度判断，换一个分辨率又炸了。
又研究了下，觉得它主要问题还是 window.pageYOffset > headerHight 计算问题，这里相当于只判断了 当前页面滑动高度 是否大于 标题图像高度 ，但是并没判断要是整个文档区域的高度都比 标题图像高度 低的情况。这样 当前页面滑动高度 可能就划不过去了。
- 注 1：
sideBar其实是我们显示的头像那个组件，不知道为啥还会影响到底部区域的显示，有 affix class 底部才能显示，删掉就会导致隐藏。 - 注 2：
document.body.offsetWidth > 991代表的是会导致排版切换为手机类型排版的最低宽度，切换为手机排版后sideBar affix class也不产生影响
# 页面百分比计算不一致问题
在修改上面标签页问题时，发现页面的 百分比 进度显示也不对劲 —— 跟实际页面滑动过的百分比不一致。
感觉原来的计算方式，仅计算百分比就不大对劲： 当前滑动高度/可显示区域高度
而 当前滑动高度 肯定会比 可显示区域高度 更大的，这种计算方式就感觉比较奇怪，然后在其它页面试了试，并特意去作者的博客看了下，显示上都不大对的上号。
于是把百分比计算和显示与否判断都改了：
const scrollHandle = function (event) { | |
var winHeight = window.innerHeight; | |
var docHeight = getDocHeight(); | |
// var contentVisibilityHeight = docHeight > winHeight ? docHeight - winHeight : document.body.scrollHeight - winHeight; | |
var contentVisibilityHeight = document.body.scrollHeight - winHeight; | |
var SHOW = window.pageYOffset > headerHightInner||docHeight<headerHight; | |
var startScroll = window.pageYOffset > 0; | |
if (SHOW) { | |
changeMetaTheme('#FFF'); | |
} else { | |
changeMetaTheme('#222'); | |
} | |
siteNav.toggleClass('show', SHOW); | |
toolBtn.toggleClass('affix', startScroll); | |
siteBrand.toggleClass('affix', startScroll); | |
// 如果滚动高度超过整个页面的头部，那就显示底部区域，否则隐藏 (实际上元素只是看不见而已，东西还是在原地的) | |
// sideBar.toggleClass('affix', window.pageYOffset > headerHight && document.body.offsetWidth > 991); | |
// 所以不清楚具体用来处理啥，单纯 window.pageYOffset > headerHight 判断可能导致底部最近评论闪烁问题 | |
sideBar.toggleClass('affix', (window.pageYOffset > headerHight ||docHeight<headerHight)&& document.body.offsetWidth > 991); | |
if (typeof scrollAction.y == 'undefined') { | |
scrollAction.y = window.pageYOffset; | |
//scrollAction.x = Container.scrollLeft; | |
//scrollAction.y = Container.scrollTop; | |
} | |
//var diffX = scrollAction.x - Container.scrollLeft; | |
diffY = scrollAction.y - window.pageYOffset; | |
//if (diffX < 0) { | |
// Scroll right | |
//} else if (diffX > 0) { | |
// Scroll left | |
//} else | |
if (diffY < 0) { | |
// Scroll down | |
siteNav.removeClass('up') | |
siteNav.toggleClass('down', SHOW); | |
} else if (diffY > 0) { | |
// Scroll up | |
siteNav.removeClass('down') | |
siteNav.toggleClass('up', SHOW); | |
} else { | |
// First scroll event | |
} | |
//scrollAction.x = Container.scrollLeft; | |
scrollAction.y = window.pageYOffset; | |
// var scrollPercent = Math.round(Math.min(100 * window.pageYOffset / contentVisibilityHeight, 100)) + '%'; | |
// 上面的计算方式感觉对不上，这个改着试试 | |
var scrollPercent = Math.round(Math.min(100*window.pageYOffset/(contentVisibilityHeight)))+"%"; | |
backToTop.child('span').innerText = scrollPercent; | |
$('.percent').width(scrollPercent); | |
} |
暂时算是好了，不知道还有没有其它问题。后续如果发现问题再看了。
# 果然出现新的问题了
头像组件会浮动至页面顶端去 —— 终于也明白 affix 用来判断什么的了，有这个标记时可以浮动，否则不行。
感觉造成闪烁的原因，最大的问题是 docHeight 取出来的值不一样，会产生变化。
最终又改了下，改成要是实际高度比页顶图片那块还低，那么判断标准就取 docHeight/2 ：
sideBar.toggleClass('affix', (window.pageYOffset > headerHight ||(docHeight<headerHight&&window.pageYOffset>docHeight/2))&& document.body.offsetWidth > 991); |
这样修改虽然不会闪烁，但要是 实际内容高度比页顶图片那块还低，滑动时头像组件进入浮动模式后，还是可能跑到页顶图片上去。
如果想彻底解决，得研究下为什么 affix 会导致下方对象看不见，然后再针对『消失』问题作处理 —— 而不是在这里改此处代码，因为理论上在这种情况下应该始终显示才对。
至于为什么会导致下方对象看不见了？估计跟 CSS 排版那边有关系，不想看了，再研究下去花的时间就太多了。
