From 61048546caa257da12d9b9ba06a3f6a0f74bed87 Mon Sep 17 00:00:00 2001
From: Mimi <1119186082@qq.com>
Date: Thu, 2 Sep 2021 23:40:06 +0800
Subject: [PATCH] Make the nav bar of tabs stick to the top (#361)

---
 _config.yml                                   |  2 ++
 scripts/helpers/next-config.js                |  1 +
 source/css/_common/scaffolding/tags/tabs.styl |  4 ++++
 source/js/utils.js                            | 11 ++++++++++-
 4 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/_config.yml b/_config.yml
index 47d336b..bd72286 100644
--- a/_config.yml
+++ b/_config.yml
@@ -796,6 +796,8 @@ note:
 
 # Tabs tag
 tabs:
+  # Make the nav bar of tabs with long content stick to the top.
+  sticky: false
   transition:
     tabs: false
     labels: true
diff --git a/scripts/helpers/next-config.js b/scripts/helpers/next-config.js
index b7603da..6f5def3 100644
--- a/scripts/helpers/next-config.js
+++ b/scripts/helpers/next-config.js
@@ -23,6 +23,7 @@ hexo.extend.helper.register('next_config', function() {
     lazyload  : theme.lazyload,
     pangu     : theme.pangu,
     comments  : theme.comments,
+    stickytabs: theme.tabs.sticky,
     motion    : theme.motion,
     prism     : config.prismjs.enable && !config.prismjs.preprocess,
     i18n      : {
diff --git a/source/css/_common/scaffolding/tags/tabs.styl b/source/css/_common/scaffolding/tags/tabs.styl
index 0fbe1a9..a6f9b50 100644
--- a/source/css/_common/scaffolding/tags/tabs.styl
+++ b/source/css/_common/scaffolding/tags/tabs.styl
@@ -6,10 +6,14 @@
   padding-top: 10px;
 
   ul.nav-tabs {
+    background: (($scheme == 'Muse') or ($scheme == 'Mist')) ? var(--body-bg-color) : var(--content-bg-color);
     display: flex;
     flex-wrap: wrap;
     margin: 0;
     padding: 0;
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
 
     +mobile-smallest() {
       display: block;
diff --git a/source/js/utils.js b/source/js/utils.js
index c3c1ec7..ab207f4 100644
--- a/source/js/utils.js
+++ b/source/js/utils.js
@@ -176,8 +176,9 @@ NexT.utils = {
         event.preventDefault();
         // Prevent selected tab to select again.
         if (element.classList.contains('active')) return;
+        const nav = element.parentNode;
         // Add & Remove active class on `nav-tabs` & `tab-content`.
-        [...element.parentNode.children].forEach(target => {
+        [...nav.children].forEach(target => {
           target.classList.toggle('active', target === element);
         });
         // https://stackoverflow.com/questions/20306204/using-queryselector-with-ids-that-are-numbers
@@ -189,6 +190,14 @@ NexT.utils = {
         tActive.dispatchEvent(new Event('tabs:click', {
           bubbles: true
         }));
+        if (!CONFIG.stickytabs) return;
+        const offset = nav.parentNode.getBoundingClientRect().top + window.scrollY + 10;
+        window.anime({
+          targets  : document.scrollingElement,
+          duration : 500,
+          easing   : 'linear',
+          scrollTop: offset
+        });
       });
     });