Hexo文章目录滚动始终在可视范围

目录

​ Hexo博客有一个好的目录总是方便的，但是目录最好一直在旁边。

​ 网上的一些教程大部分是直接在style里设置position=fixed，这样起始位置时也是fixed的，不太好看，而且在目录很长的时候是始终看不到下面，我们想要一个初始absolute，逃出视线时换成fixed。这就完美了。

​ 用JavaScript来实现，在/source/js/ 里创建一个toc.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
(function() {
        'use strict';

        function light(config){

        }
        light.prototype.init = function() {
                this.tocFixed();

        };
//make toc stay in the visible area
        light.prototype.tocFixed = function(){
                var HEADER_OFFSET = 0;
                var $toc = $('#post-toc');
                if ($toc.length){
                        var minScrollTop = $toc.offset().top;
                        $(window).scroll(function(){
                                var scrollTop = $(window).scrollTop();
                                if (scrollTop <minScrollTop){
                                        $toc.css({'position':'absolute','top':'0px'});
                                } else {
                                //      $toc.css({'position':'fixed','top':'20px','right':'50px'});
                                        $toc.css({'top':scrollTop-150+'px'});
                                }
                        });
                }
        };

        var light = new light();
        light.init();
})(window);

改动HEADER_OFFSET和css中的值，这个与你的布局有关，自己找到一个合适的值就算完成了，别忘了在layout.ejs里引用它。