diff --git a/layout/_scripts/schemes/gemini.njk b/layout/_scripts/schemes/gemini.njk index 3d29856..e69de29 100644 --- 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 index 3d29856..e69de29 100644 --- 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 index 73d4da7..ac7370b 100644 --- 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 index 5e69061..f9b4499 100644 --- 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 index c83a681..9880e27 100644 --- 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 deleted file mode 100644 index 6538466..0000000 --- a/source/js/schemes/pisces.js +++ /dev/null @@ -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()); -}); diff --git a/source/js/utils.js b/source/js/utils.js index 696f396..e7582df 100644 --- 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();