Use position: sticky

layout/_scripts/schemes/gemini.njk

@@ -1 +0,0 @@
-{{- next_js('schemes/pisces.js') }}

layout/_scripts/schemes/pisces.njk

@@ -1 +0,0 @@
-{{- next_js('schemes/pisces.js') }}

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;

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 {

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() {

source/js/schemes/pisces.js

@@ -1,86 +0,0 @@
-/* global NexT, CONFIG */
-
-const Affix = {
-  init: function(element, options) {
-    this.element = element;
-    this.offset = options || 0;
-    this.affixed = null;
-    this.unpin = null;
-    this.pinnedOffset = null;
-    this.checkPosition();
-    window.addEventListener('scroll', this.checkPosition.bind(this));
-    window.addEventListener('click', this.checkPositionWithEventLoop.bind(this));
-    window.matchMedia('(min-width: 992px)').addListener(event => {
-      if (event.matches) {
-        this.offset = NexT.utils.getAffixParam();
-        this.checkPosition();
-      }
-    });
-  },
-  getState: function(scrollHeight, height, offsetTop, offsetBottom) {
-    let scrollTop = window.scrollY;
-    let targetHeight = window.innerHeight;
-    if (offsetTop != null && this.affixed === 'top') {
-      if (document.querySelector('.content-wrap').offsetHeight < offsetTop) return 'top';
-      return scrollTop < offsetTop ? 'top' : false;
-    }
-    if (this.affixed === 'bottom') {
-      if (offsetTop != null) return this.unpin <= this.element.getBoundingClientRect().top ? false : 'bottom';
-      return scrollTop + targetHeight <= scrollHeight - offsetBottom ? false : 'bottom';
-    }
-    let initializing = this.affixed === null;
-    let colliderTop = initializing ? scrollTop : this.element.getBoundingClientRect().top + scrollTop;
-    let colliderHeight = initializing ? targetHeight : height;
-    if (offsetTop != null && scrollTop <= offsetTop) return 'top';
-    if (offsetBottom != null && (colliderTop + colliderHeight >= scrollHeight - offsetBottom)) return 'bottom';
-    return false;
-  },
-  getPinnedOffset: function() {
-    if (this.pinnedOffset) return this.pinnedOffset;
-    this.element.classList.remove('affix-top', 'affix-bottom');
-    this.element.classList.add('affix');
-    return (this.pinnedOffset = this.element.getBoundingClientRect().top);
-  },
-  checkPositionWithEventLoop() {
-    setTimeout(this.checkPosition.bind(this), 1);
-  },
-  checkPosition: function() {
-    if (window.getComputedStyle(this.element).display === 'none') return;
-    let height = this.element.offsetHeight;
-    let { offset } = this;
-    let offsetTop = offset.top;
-    let offsetBottom = offset.bottom;
-    let { scrollHeight } = document.body;
-    let affix = this.getState(scrollHeight, height, offsetTop, offsetBottom);
-    if (this.affixed !== affix) {
-      if (this.unpin != null) this.element.style.top = '';
-      let affixType = 'affix' + (affix ? '-' + affix : '');
-      this.affixed = affix;
-      this.unpin = affix === 'bottom' ? this.getPinnedOffset() : null;
-      this.element.classList.remove('affix', 'affix-top', 'affix-bottom');
-      this.element.classList.add(affixType);
-    }
-    if (affix === 'bottom') {
-      this.element.style.top = scrollHeight - height - offsetBottom + 'px';
-    }
-  }
-};
-
-NexT.utils.getAffixParam = function() {
-  const sidebarOffset = CONFIG.sidebar.offset || 12;
-
-  let headerOffset = document.querySelector('.header-inner').offsetHeight;
-  let footerOffset = document.querySelector('.footer').offsetHeight;
-
-  document.querySelector('.sidebar').style.marginTop = headerOffset + sidebarOffset + 'px';
-
-  return {
-    top   : headerOffset,
-    bottom: footerOffset
-  };
-};
-
-document.addEventListener('DOMContentLoaded', () => {
-
-  Affix.init(document.querySelector('.sidebar-inner'), NexT.utils.getAffixParam());
-});

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();