目录跟随鼠标移动定位

目录跟随鼠标移动定位,使读者清楚文章脉络及其阅读进度.

初衷

使用hexo框架已经有一段时间了,逐渐萌生改动yelee这个模板的想法.当然,本文也只是根据前人的经验造造轮子,主要针对文章目录部分提提个人的想法.如果有更好的想法,还望不吝赐教.

基本思路与代码实现

基本思路

文章目录的跟随定位的效果,就是当上下滚动文章时相应位置锚点所对应的目录随之高亮.其原理就是比较滚动条与顶部的距离与锚点与屏幕顶部的距离,当且仅当前者大于当前的后者而小于下个锚点与屏幕顶部的距离,则该锚点相应的目录随之高亮显示.

代码实现

两个距离

所谓的两个距离,就是滚动条与屏幕顶部的距离与锚点与屏幕顶部的距离.

• 滚动条与屏幕顶部的距离(heigthScroll): $(window).scrollTop();
• 锚点i与屏幕顶部的距离(heightAnchor): $(arrayAnchor[i].attr(‘href’)).offset().top;

代码释义

以下是目录跟随的部分伪代码实现:

function update(){
  var flag = 0;
  for(var i = 0;i<length;i++){
    if(length == i + 1){
      flag = i;
      continue;
    }
    var heightAnchor = $(arrayAnchor[i].attr('href')).offset().top;
    if(heightAnchor >= heigthScroll && heightTemp <= heigthScroll){
      flag = i;
      break;
    }else{
      heightTemp = heightAnchor;
    }
  }
  if(length > 0){
    # 高亮显示锚点对应的目录
  }
}

代码优化

回归主题

如果单单只想显示当前目录的话,以上介绍已经足够了.不过,实际上目录跟随不仅仅如此,如果当前目录有父目录则需要高亮显示,从而达到”让读者清楚文章脉络”的主旨.所以,我们才需要对目录跟随功能做深入的挖掘.

遍历算法

不难发现,鼠标移动过程中目录的变化实际上基于”图的深度优先遍历”.

算法优化

基于内存优化的考量,如果每次渲染(这里特指指定目录高亮)的时候都去根据算法遍历一次的思路显然是不合理的.自然地,对每篇文章有且只有一次遍历一次是最合理的,所以把遍历后的数据作为全局变量在初始化的时候也一并做好是再好不过了.

代码实现

总结

参考资料

文章目录跟随定位