KeJunMao/jekyll-theme-mdui

<style>
    #k-toc-card{
        background-color: transparent;
        width: 260px;
        list-style: none;
        padding: 0;
    }
    #k-toc-card ul{
        list-style: none;
        padding: 0px;
    }
    .pin-top {
        margin-top: 245px;
    }
    .pinned {
        position: fixed;
    }
    #k-toc-card li{
        max-width: 300px;
        min-width: 200px;
    }
    #k-toc-card a{
            text-align: left;
    color: black;
    display: block;
    width: 100%;
    text-decoration: none;
    position: relative;
    min-width: 88px;
    height: 36px;
    box-sizing: border-box;
    padding: 0 16px;
    margin: 0;
    overflow: hidden;
    font-size: 14px;
    font-weight: 500;
    line-height: 36px;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    zoom: 1;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background: transparent;
    border: none;
    border-radius: 2px;
    outline: none;
    transition: all .2s cubic-bezier(.4, 0, .2, 1), box-shadow .2s cubic-bezier(.4, 0, 1, 1);
    will-change: box-shadow;
    -webkit-user-drag: none;
    }
    #k-toc-card a:hover {
        background-color: rgba(0, 0, 0, .1);
    }
    #toc ul .toc-active {
    border-left: 3px solid #448aff;
    background-color: rgba(0, 0, 0, .2);
}
</style>
<div id="k-toc-card" class="mdui-card mdui-shadow-0">
    <div id="toc"></div>
</div>
<script>
    Materialize={};Materialize.guid=(function(){function s4(){return Math.floor((1+Math.random())*65536).toString(16).substring(1)}return function(){return s4()+s4()+"-"+s4()+"-"+s4()+"-"+s4()+"-"+s4()+s4()+s4()}})();(function($){$.fn.pushpin=function(options){var defaults={top:0,bottom:Infinity,offset:0};if(options==="remove"){this.each(function(){if(id=$(this).data("pushpin-id")){$(window).off("scroll."+id);$(this).removeData("pushpin-id").removeClass("pin-top pinned pin-bottom").removeAttr("style")}});return false}options=$.extend(defaults,options);$index=0;return this.each(function(){var $uniqueId=Materialize.guid(),$this=$(this),$original_offset=$(this).offset().top;function removePinClasses(object){object.removeClass("pin-top");object.removeClass("pinned");object.removeClass("pin-bottom")}function updateElements(objects,scrolled){objects.each(function(){if(options.top<=scrolled&&options.bottom>=scrolled&&!$(this).hasClass("pinned")){removePinClasses($(this));$(this).css("top",options.offset);$(this).addClass("pinned")}if(scrolled<options.top&&!$(this).hasClass("pin-top")){removePinClasses($(this));$(this).css("top",0);$(this).addClass("pin-top")}if(scrolled>options.bottom&&!$(this).hasClass("pin-bottom")){removePinClasses($(this));$(this).addClass("pin-bottom");$(this).css("top",options.bottom-$original_offset)}})}$(this).data("pushpin-id",$uniqueId);updateElements($this,$(window).scrollTop());$(window).on("scroll."+$uniqueId,function(){var $scrolled=$(window).scrollTop()+options.offset;updateElements($this,$scrolled)})})}}(jQuery));
    !function(a){a.fn.smoothScroller=function(b){b=a.extend({},a.fn.smoothScroller.defaults,b);var c=a(this);return a(b.scrollEl).animate({scrollTop:c.offset().top-a(b.scrollEl).offset().top-b.offset},b.speed,b.ease,function(){var a=c.attr("id");a.length&&(history.pushState?history.pushState(null,null,"#"+a):document.location.hash=a),c.trigger("smoothScrollerComplete")}),this},a.fn.smoothScroller.defaults={speed:400,ease:"swing",scrollEl:"body,html",offset:0},a("body").on("click","[data-smoothscroller]",function(b){b.preventDefault();var c=a(this).attr("href");0===c.indexOf("#")&&a(c).smoothScroller()})}(jQuery),function(a){var b={};a.fn.toc=function(b){var c,d=this,e=a.extend({},jQuery.fn.toc.defaults,b),f=a(e.container),g=a(e.selectors,f),h=[],i=e.activeClass,j=function(b,c){if(e.smoothScrolling&&"function"==typeof e.smoothScrolling){b.preventDefault();var f=a(b.target).attr("href");e.smoothScrolling(f,e,c)}a("li",d).removeClass(i),a(b.target).parent().addClass(i)},k=function(){c&&clearTimeout(c),c=setTimeout(function(){for(var b,c=a(window).scrollTop(),f=Number.MAX_VALUE,g=0,j=0,k=h.length;k>j;j++){var l=Math.abs(h[j]-c);f>l&&(g=j,f=l)}a("li",d).removeClass(i),b=a("li:eq("+g+")",d).addClass(i),e.onHighlight(b)},50)};return e.highlightOnScroll&&(a(window).bind("scroll",k),k()),this.each(function(){var b=a(this),c=a(e.listType);g.each(function(d,f){var g=a(f);h.push(g.offset().top-e.highlightOffset);var i=e.anchorName(d,f,e.prefix);if(f.id!==i){a("<span/>").attr("id",i).insertBefore(g)}var l=a("<a/>").text(e.headerText(d,f,g)).attr("href","#"+i).bind("click",function(c){a(window).unbind("scroll",k),j(c,function(){a(window).bind("scroll",k)}),b.trigger("selected",a(this).attr("href"))}),m=a("<li/>").addClass(e.itemClass(d,f,g,e.prefix)).append(l);c.append(m)}),b.html(c)})},jQuery.fn.toc.defaults={container:"body",listType:"<ul/>",selectors:"h1,h2,h3",smoothScrolling:function(b,c,d){a(b).smoothScroller({offset:c.scrollToOffset}).on("smoothScrollerComplete",function(){d()})},scrollToOffset:0,prefix:"toc",activeClass:"toc-active",onHighlight:function(){},highlightOnScroll:!0,highlightOffset:100,anchorName:function(c,d,e){if(d.id.length)return d.id;var f=a(d).text().replace(/[^a-z0-9]/gi," ").replace(/\s+/g,"-").toLowerCase();if(b[f]){for(var g=2;b[f+g];)g++;f=f+"-"+g}return b[f]=!0,e+"-"+f},headerText:function(a,b,c){return c.text()},itemClass:function(a,b,c,d){return d+"-"+c[0].tagName.toLowerCase()}}}(jQuery);
</script>
<script>
    $('#toc').toc({
        'selectors': 'h2',
        'prefix': 'toc',
        'highlightOffset': 64
    });
    var tocTop = $('.mdui-card-header').offset().top;
    $('#k-toc-card').pushpin({
      top: tocTop,
      bottom: 99999,
      offset: 200
    });
</script>