什么叫TOC呢?table of content。
具体什么效果呢?可以随便找个hexo博客中体验一下,例如这个。
好了,实现它有2个要点:
点目录跳到段落:通过标签的锚点实现,其原理在这里。
滚动触发目录变换:通过js监听滚动事件,判定当前所处段落,令对应目录项高亮。
我写了一个简单的demo来演示这个效果,
源码地址:https://github.com/owenliang/js-toc
在线体验:http://owenliang.github.io/js-toc
实现分析
#toc是左侧的