https://github.com/b3log/solo/issues/12720 9IPHP

9IPHP/js/common.js

@@ -44,12 +44,16 @@ var Skin = {
 
       if ($(window).scrollTop() > $banner.height()) {
         $navbar.addClass('pin')
-        $('.main-wrap').parent().css('margin-top', '86px')
+        $('.main-wrap').parent().css('margin-top', '81px')
+        $('.article__toc').css('position', 'fixed')
       } else {
         $navbar.removeClass('pin')
         $('.main-wrap').parent().css('margin-top', '0')
+        $('.article__toc').css('position', 'inherit')
       }
     })
+
+    $(window).scroll()
   },
   init: function () {
     this._initCommon($('.icon-up'))
@@ -70,63 +74,27 @@ var Skin = {
       $('.responsive .list').slideToggle()
     })
   },
-  _initArticleCommon: function (tocLabel, siteViewLabel) {
-    // TOC
-    if ($('.article__toc').length > 0 && $(window).width() > 1000) {
-      $('.article__toc, .article__toc > ul').show()
-
-      var $sectionF = $('aside section:first').html($('.b3-solo-list')),
-        $sectionL = $('aside section:last')
-      $sectionF.height($(window).height() - 154).
-        css({'overflow': 'auto', 'width': $('aside').width() + 'px'})
-      $sectionL.hide()
-      // 切换 tab
-      $('aside > ul > li').click(function () {
-        if ($(this).data('tab') === 'toc') {
-          $sectionL.animate({
-            'opacity': '0',
-            'top': '-50px',
-          }, 300, function () {
-            $sectionF.show().css('top', '-50px')
-            $sectionF.animate({
-              'opacity': '1',
-              'top': '0',
-            }, 300).show()
-          })
-        } else {
-          $sectionF.animate({
-            'opacity': '0',
-            'top': '-50px',
-          }, 300, function () {
-            $sectionF.hide().css('top', '-50px')
-            $sectionL.animate({
-              'opacity': '1',
-              'top': '0',
-            }, 300).show()
-          }).hide()
-        }
-        $('aside > ul > li').removeClass('current')
-        $(this).addClass('current')
-      })
-
-      $(window).scroll(function () {
-        if ($(window).scrollTop() > 125) {
-          $('aside section:eq(0)').css({
-            position: 'fixed',
-            top: '51px',
-            backgroundColor: '#fff',
-          })
-        } else {
-          $('aside section:eq(0)').css({
-            position: 'inherit',
-            borderLeft: 0,
-          })
-        }
-      })
+  initToc: function () {
+    var $articleToc = $('.article__toc')
+    if ($articleToc.length === 0) {
+      return false
     }
-  },
-  initArticle: function (tocLabel, siteViewLabel) {
-    this._initArticleCommon(tocLabel, siteViewLabel)
+
+    $articleToc.css({
+      width: $articleToc.parent().width(),
+      left: $articleToc.parent().offset().left,
+    }).find('a').click(function () {
+      $articleToc.find('li').removeClass('toc--current')
+      $(this).parent().addClass('toc--current')
+      var id = $(this).attr('href')
+      setTimeout(function () {
+        $(window).scrollTop($(id).offset().top - 60)
+      })
+    })
   },
 }
-Skin.init()
+
+$(document).ready(function () {
+  Util.init()
+  Skin.init()
+})

9IPHP/js/common.min.js

@@ -1 +1 @@
-var Skin={_initCommon:function(i){var t=$("header .banner"),n=$("header .navbar");$(window).scroll(function(){if(125<$(window).scrollTop()?i.show():i.hide(),$(window).width()<701)return!1;$(window).scrollTop()>t.height()?(n.addClass("pin"),$(".main-wrap").parent().css("margin-top","86px")):(n.removeClass("pin"),$(".main-wrap").parent().css("margin-top","0"))})},init:function(){this._initCommon($(".icon-up")),$(".navbar nav a").each(function(){this.href===location.href&&(this.className="current")}),$(".responsive .list a").each(function(){this.href===location.href&&$(this).parent().addClass("current")}),$(".responsive .icon-list").click(function(){$(".responsive .list").slideToggle()})},_initArticleCommon:function(i,t){if(0<$(".b3-solo-list li").length&&1e3<$(window).width()){$("aside").addClass("has-toc");var n='<ul class="fn-clear"><li class="current" data-tab="toc">'+i+'</li><li data-tab="site">'+t+"</li></ul><section></section>";$("aside").prepend(n);var o=$("aside section:first").html($(".b3-solo-list")),s=$("aside section:last");o.height($(window).height()-154).css({overflow:"auto",width:$("aside").width()+"px"}),s.hide(),$("aside > ul > li").click(function(){"toc"===$(this).data("tab")?s.animate({opacity:"0",top:"-50px"},300,function(){o.show().css("top","-50px"),o.animate({opacity:"1",top:"0"},300).show()}):o.animate({opacity:"0",top:"-50px"},300,function(){o.hide().css("top","-50px"),s.animate({opacity:"1",top:"0"},300).show()}).hide(),$("aside > ul > li").removeClass("current"),$(this).addClass("current")}),$(window).scroll(function(){125<$(window).scrollTop()?$("aside section:eq(0)").css({position:"fixed",top:"51px",backgroundColor:"#fff"}):$("aside section:eq(0)").css({position:"inherit",borderLeft:0})})}},initArticle:function(i,t){this._initArticleCommon(i,t)}};Skin.init();
+var Skin={_initCommon:function(i){var n=$("header .banner"),t=$("header .navbar");$(window).scroll(function(){if(125<$(window).scrollTop()?i.show():i.hide(),$(window).width()<701)return!1;$(window).scrollTop()>n.height()?(t.addClass("pin"),$(".main-wrap").parent().css("margin-top","81px"),$(".article__toc").css("position","fixed")):(t.removeClass("pin"),$(".main-wrap").parent().css("margin-top","0"),$(".article__toc").css("position","inherit"))}),$(window).scroll()},init:function(){this._initCommon($(".icon-up")),$(".navbar nav a").each(function(){this.href===location.href&&(this.className="current")}),$(".responsive .list a").each(function(){this.href===location.href&&$(this).parent().addClass("current")}),$(".responsive .icon-list").click(function(){$(".responsive .list").slideToggle()})},initToc:function(){var n=$(".article__toc");if(0===n.length)return!1;n.css({width:n.parent().width(),position:"fixed",left:n.parent().offset().left}).find("a").click(function(){n.find("li").removeClass("toc--current"),$(this).parent().addClass("toc--current");var i=$(this).attr("href");setTimeout(function(){$(window).scrollTop($(i).offset().top-60)})})}};$(document).ready(function(){Util.init(),Skin.init()});