fix(#14): Resolve wrong display in toc when click heading in it

source/js/sidebar.js

@@ -18,8 +18,11 @@ $(document).ready(function () {
 
     $headings.each(function () {
       var headingTop = this.getBoundingClientRect().top;
+      // The minimum distance from the top of the browser
+      //   when heading is marked as active in toc.
+      var MIN_HEIGHT_TO_TOP = 5;
 
-      if (headingTop < 0) {
+      if (headingTop <= MIN_HEIGHT_TO_TOP) {
         currHeading = this.getAttribute('id');
       }
     });
@@ -57,7 +60,9 @@ $(document).ready(function () {
     var $tocWrapHeight = $('.sidebar-toc').height();
     var $tocHeight = $('.sidebar-toc .toc').height();
 
-    if ($tocHeight <= $tocWrapHeight) return;
+    if ($tocHeight <= $tocWrapHeight) {
+      return;
+    }
 
     var $tocWrap = $('.sidebar-toc');
     var $currTocItem = $('.sidebar-toc .current a');
@@ -142,7 +147,9 @@ $(document).ready(function () {
     var $overview = $('.sidebar-ov');
 
     $navToc.on('click', function () {
-      if ($(this).hasClass('current')) return;
+      if ($(this).hasClass('current')) {
+        return;
+      }
 
       $navToc.addClass('current');
       $navOv.removeClass('current');
@@ -155,7 +162,9 @@ $(document).ready(function () {
     });
 
     $navOv.on('click', function () {
-      if ($(this).hasClass('current')) return;
+      if ($(this).hasClass('current')) {
+        return;
+      }
 
       $navOv.addClass('current');
       $navToc.removeClass('current');

source/js/utils.js

@@ -176,7 +176,9 @@ Stun.utils = Stun.$u = {
     }
   },
   initTocDisplay: function () {
-    if ($('.post-body').find('h1,h2,h3,h4,h5,h6')[0]) return;
+    if ($('.post-body').find('h1,h2,h3,h4,h5,h6')[0]) {
+      return;
+    }
 
     $('.sidebar-nav').addClass('hide');
     $('.sidebar-toc').addClass('hide');
@@ -253,7 +255,9 @@ Stun.utils = Stun.$u = {
   },
   // Add a mark icon to the link with `target="_blank"` attribute.
   addIconToExternalLink: function (container) {
-    if (!$(container).length) return;
+    if (!$(container).length) {
+      return;
+    }
 
     var faPrefix = CONFIG.fontawesome.prefix;
     var $wrapper = $('<span class="external-link"></span>');