feat: Fold toc by default & spread it auto when heading to the top

source/css/_common/sidebar.styl

-$sidebar-float = convert(
-  hexo-config('sidebar.position') || 'right')
-$sidebar-width = convert(
-  hexo-config('sidebar.width') || '300px')
+$sidebar-float = convert(hexo-config('sidebar.position') || 'right')
+$sidebar-width = convert(hexo-config('sidebar.width') || '300px')
 
 #sidebar
   float: $sidebar-float
   width: $sidebar-width
   font-size: $font-sidebar-base
 
-$sidebar-top = convert(
-  hexo-config('sidebar.offsetTop') || '30px')
+$sidebar-top = convert(hexo-config('sidebar.offsetTop') || '30px')
 
 .sidebar-inner
   border-radius: 5px
@@ -56,7 +53,22 @@ else
   overflow: auto
   max-height: 50vh
   @extend $toc-word-break
-  
+
+  .toc .toc-child
+    display: none
+
+  .toc .active > .toc-child
+    display: block
+
+  .toc .current > .toc-child
+    display: block
+
+  .active,
+  .current
+    & > a
+      color: $orange-dark
+      transition: color .3s
+
   ol,
   li
     list-style: none
@@ -66,14 +78,13 @@ else
     padding-left: 1em
 
 $avatar-rounded = 0
+
 if (hexo-config('author.avatar.rounded'))
   $avatar-rounded = 50%
 
 $avatar-opacity = hexo-config('author.avatar.opacity') || 1
-$avatar-animation = 'avatar-' + convert(
-  hexo-config('author.avatar.animation') || 'turn')
-$text-align = convert(
-  hexo-config('social_setting.text_align') || 'center')
+$avatar-animation = 'avatar-' + convert(hexo-config('author.avatar.animation') || 'turn')
+$text-align = convert(hexo-config('social_setting.text_align') || 'center')
 
 .sidebar-overview
   .sidebar-author
@@ -131,9 +142,9 @@ $text-align = convert(
         display: inline
 
       if (hexo-config('social_setting.icon_only'))
-        background-color: $sidebar-social-color
         border-radius: 50%
         line-height: 1.5rem
+        background-color: $sidebar-social-color
 
         &:hover
           background-color: $sidebar-social-hover-color
@@ -158,7 +169,7 @@ $text-align = convert(
 
         i
           width: 1.2rem
-        
+
         &:hover
           background-color: $sidebar-social-color
 
@@ -235,10 +246,8 @@ $text-align = convert(
     margin-top: 0
     padding-top: 0
 
-$reading_progress_color = convert(
-  hexo-config('reading_progress.color') || '$blue-light')
-$reading_progress_height = convert(
-  hexo-config('reading_progress.height') || '1px')
+$reading_progress_color = convert(hexo-config('reading_progress.color') || '$blue-light')
+$reading_progress_height = convert(hexo-config('reading_progress.height') || '1px')
 
 .sidebar-progress
   margin-top: .5em

source/js/scroll.js

@@ -14,24 +14,29 @@ $(document).ready(function () {
   // Must initial run
   readProgress();
   sidebarSticky();
+  autoSpreadToc();
+
+  var currHeading = null;
+  var lastHeading = null;
 
   $(window).scroll(function () {
     readProgress();
     sidebarSticky();
+    autoSpreadToc();
   });
 
   // click heading
   $('.main-content')
     .find('h1,h2,h3,h4,h5,h6')
     .on('click', function () {
-      scrollToHead('#' + $(this).attr('id'))
+      scrollHeadingToTop('#' + $(this).attr('id'))
     });
 
   // click post toc
   $('.toc-link').on('click', function (e) {
     e.preventDefault();
 
-    scrollToHead($(this).attr('href'));
+    scrollHeadingToTop($(this).attr('href'));
   });
 
   $('#back-top').click(function () {
@@ -110,8 +115,40 @@ $(document).ready(function () {
     $('.sidebar-progress-line').css('width', percent);
   }
 
+  // Automatically expand items in the article directory
+  //   based on the scrolling of heading in the article
+  function autoSpreadToc() {
+    if ($('.post-body').find('h1,h2,h3,h4,h5,h6')
+        .first().offset().top - $(window).scrollTop() > 0) {
+      $('.sidebar-toc li').removeClass('active current');
+
+      return;
+    }
+
+    $('.post-body').find('h1,h2,h3,h4,h5,h6')
+      .each(function (index, item) {
+        var top = item.getBoundingClientRect().top;
+
+        if (top < 0) {
+          currHeading = $(item).attr('id');
+        }
+      });
+      
+    if (currHeading === lastHeading) {
+      return;
+    } else {
+      $('.sidebar-toc li').removeClass('active current');
+      $(`.sidebar-toc a[href="#${currHeading}"]`)
+        .parents('li').addClass('active');
+      $(`.sidebar-toc a[href="#${currHeading}"]`)
+        .parent().addClass('current');
+
+      lastHeading = currHeading;
+    }
+  }
+
   // scroll heading to top
-  function scrollToHead(anchor) {
+  function scrollHeadingToTop(anchor) {
     $(anchor)
       .velocity('stop')
       .velocity('scroll', {