Use position: sticky

next-theme · Jun 16, 2020 · b9968b6 · b9968b6 · stevenjoezhang · Jun 16, 2020
1 parent b01a4ed
commit b9968b6
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 99 deletions.
diff --git a/layout/_scripts/schemes/gemini.njk b/layout/_scripts/schemes/gemini.njk
@@ -1 +0,0 @@
-{{- next_js('schemes/pisces.js') }}

diff --git a/layout/_scripts/schemes/pisces.njk b/layout/_scripts/schemes/pisces.njk
@@ -1 +0,0 @@
-{{- next_js('schemes/pisces.js') }}

diff --git a/source/css/_schemes/Pisces/_layout.styl b/source/css/_schemes/Pisces/_layout.styl
@@ -51,6 +51,7 @@
 }
 
 .content-wrap {
+  align-self: stretch;
   background: var(--content-bg-color);
   border-radius: $border-radius-inner;
   box-shadow: $box-shadow-inner;

diff --git a/source/css/_schemes/Pisces/_sidebar.styl b/source/css/_schemes/Pisces/_sidebar.styl
@@ -1,7 +1,9 @@
 .sidebar {
-  background: var(--body-bg-color);
+  // Make sure that .content-wrap and .sidebar are the same height
+  // Required for .sidebar-inner `position: sticky;`
+  align-self: stretch;
+  background: initial;
   box-shadow: none;
-  margin-top: 100%;
   position: static;
   width: $sidebar-desktop;
 
@@ -20,20 +22,13 @@
   box-shadow: $box-shadow;
   box-sizing: border-box;
   color: var(--text-color);
+  position: sticky;
+  top: $sidebar-offset;
   width: $sidebar-desktop;
 
   if (hexo-config('motion.enable') && hexo-config('motion.transition.sidebar')) {
     opacity: 0;
   }
-
-  &.affix {
-    position: fixed;
-    top: $sidebar-offset;
-  }
-
-  &.affix-bottom {
-    position: absolute;
-  }
 }
 
 .site-state-item a {

diff --git a/source/js/next-boot.js b/source/js/next-boot.js
@@ -71,6 +71,15 @@ NexT.boot.registerEvents = function() {
       target && target.click();
     }
   });
+
+  if (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') {
+    NexT.utils.setAffixParam();
+    window.matchMedia('(min-width: 992px)').addListener(event => {
+      if (event.matches) {
+        NexT.utils.setAffixParam();
+      }
+    });
+  }
 };
 
 NexT.boot.refresh = function() {

diff --git a/source/js/schemes/pisces.js b/source/js/schemes/pisces.js
diff --git a/source/js/utils.js b/source/js/utils.js
@@ -362,6 +362,13 @@ NexT.utils = {
     }
   },
 
+  setAffixParam: function() {
+    const sidebarOffset = CONFIG.sidebar.offset || 12;
+    const headerOffset = document.querySelector('.header-inner').offsetHeight;
+
+    document.querySelector('.sidebar-inner').style.marginTop = headerOffset + sidebarOffset + 'px';
+  },
+
   getScript: function(url, callback, condition) {
     if (condition) {
       callback();