Make the nav bar of tabs stick to the top (#361)

_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

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      : {

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;

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
+        });
       });
     });