From 410985ebc026a42bb5fb452b6ba45e30acc31657 Mon Sep 17 00:00:00 2001 From: jonahtanjz Date: Wed, 10 Feb 2021 16:47:13 +0800 Subject: [PATCH 1/6] Hide header on scroll --- packages/core-web/src/index.js | 13 +++++++++++++ packages/core-web/src/styles/markbind.css | 5 +++++ packages/vue-components/src/Overlay.vue | 7 ++++++- 3 files changed, 24 insertions(+), 1 deletion(-) diff --git a/packages/core-web/src/index.js b/packages/core-web/src/index.js index fd142a3fd4..294bcc6651 100644 --- a/packages/core-web/src/index.js +++ b/packages/core-web/src/index.js @@ -83,7 +83,20 @@ function detectAndApplyFixedHeaderStyles() { }); resizeObserver.observe(headerSelector[0]); }; + + let lastOffset = 0; + const toggleHeaderOnScroll = () => { + const currentOffset = window.pageYOffset; + if (currentOffset > lastOffset) { + headerSelector.addClass('hide-header'); + } else { + headerSelector.removeClass('hide-header'); + } + lastOffset = currentOffset; + }; + addResizeHeaderListener(); + setTimeout(() => window.addEventListener('scroll', toggleHeaderOnScroll), 500); } function updateSearchData(vm) { diff --git a/packages/core-web/src/styles/markbind.css b/packages/core-web/src/styles/markbind.css index 99bb72afb6..295632044a 100644 --- a/packages/core-web/src/styles/markbind.css +++ b/packages/core-web/src/styles/markbind.css @@ -123,6 +123,11 @@ header[fixed] { z-index: 1001; } +header[fixed].hide-header { + height: 0; + overflow: hidden; +} + /* #app is treated as the main container */ #app { display: flex; diff --git a/packages/vue-components/src/Overlay.vue b/packages/vue-components/src/Overlay.vue index 84581dacea..931a55aa26 100644 --- a/packages/vue-components/src/Overlay.vue +++ b/packages/vue-components/src/Overlay.vue @@ -57,7 +57,12 @@ export default { }, methods: { toggleNavMenu() { - if (!this.show) { publish('closeOverlay'); } + if (!this.show) { + publish('closeOverlay'); + document.body.style.overflow = 'hidden'; + } else { + document.body.style.removeProperty('overflow'); + } this.show = !this.show; }, navMenuLoaded() { From f049d2ce1eda532b008acf4f254846f34eda2aaa Mon Sep 17 00:00:00 2001 From: jonahtanjz Date: Fri, 12 Feb 2021 11:45:55 +0800 Subject: [PATCH 2/6] Add transition effect --- packages/core-web/src/index.js | 4 +++- packages/core-web/src/styles/markbind.css | 7 +++++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/core-web/src/index.js b/packages/core-web/src/index.js index 294bcc6651..e6e29a6a62 100644 --- a/packages/core-web/src/index.js +++ b/packages/core-web/src/index.js @@ -86,7 +86,9 @@ function detectAndApplyFixedHeaderStyles() { let lastOffset = 0; const toggleHeaderOnScroll = () => { + if (window.innerWidth > 767) { return; } const currentOffset = window.pageYOffset; + if ((window.innerHeight + currentOffset) >= document.body.offsetHeight) { return; } if (currentOffset > lastOffset) { headerSelector.addClass('hide-header'); } else { @@ -96,7 +98,7 @@ function detectAndApplyFixedHeaderStyles() { }; addResizeHeaderListener(); - setTimeout(() => window.addEventListener('scroll', toggleHeaderOnScroll), 500); + window.addEventListener('scroll', toggleHeaderOnScroll); } function updateSearchData(vm) { diff --git a/packages/core-web/src/styles/markbind.css b/packages/core-web/src/styles/markbind.css index 295632044a..ce458aa749 100644 --- a/packages/core-web/src/styles/markbind.css +++ b/packages/core-web/src/styles/markbind.css @@ -118,14 +118,17 @@ code.hljs.inline { /* Header */ header[fixed] { + max-height: 100%; + overflow: hidden; position: fixed; + transition: max-height 0.6s ease-in; width: 100%; z-index: 1001; } header[fixed].hide-header { - height: 0; - overflow: hidden; + max-height: 0; + transition: max-height 0.6s ease-out; } /* #app is treated as the main container */ From 587be39daa6fa0b9a28e329eb0bb0a2adb27d646 Mon Sep 17 00:00:00 2001 From: jonahtanjz Date: Sat, 13 Feb 2021 11:09:08 +0800 Subject: [PATCH 3/6] Add comments to code --- packages/core-web/src/index.js | 5 ++++- packages/vue-components/src/Overlay.vue | 1 + 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/core-web/src/index.js b/packages/core-web/src/index.js index e6e29a6a62..525298e22b 100644 --- a/packages/core-web/src/index.js +++ b/packages/core-web/src/index.js @@ -86,9 +86,12 @@ function detectAndApplyFixedHeaderStyles() { let lastOffset = 0; const toggleHeaderOnScroll = () => { + // prevent toggling of header on desktop site if (window.innerWidth > 767) { return; } const currentOffset = window.pageYOffset; - if ((window.innerHeight + currentOffset) >= document.body.offsetHeight) { return; } + const isEndOfPage = (window.innerHeight + currentOffset) >= document.body.offsetHeight; + // to prevent page from auto scrolling when header is toggled at the end of page + if (isEndOfPage) { return; } if (currentOffset > lastOffset) { headerSelector.addClass('hide-header'); } else { diff --git a/packages/vue-components/src/Overlay.vue b/packages/vue-components/src/Overlay.vue index 931a55aa26..8e5815a7f1 100644 --- a/packages/vue-components/src/Overlay.vue +++ b/packages/vue-components/src/Overlay.vue @@ -59,6 +59,7 @@ export default { toggleNavMenu() { if (!this.show) { publish('closeOverlay'); + // to prevent scrolling of the body when overlay is overscrolled document.body.style.overflow = 'hidden'; } else { document.body.style.removeProperty('overflow'); From dece3cca897eaa05d44ad2f70189b3ad6b39ba97 Mon Sep 17 00:00:00 2001 From: jonahtanjz Date: Sat, 13 Feb 2021 21:42:50 +0800 Subject: [PATCH 4/6] Remove overflow when max-height is 100% --- packages/core-web/src/index.js | 70 +++++++++++++++-------- packages/core-web/src/styles/markbind.css | 1 - 2 files changed, 45 insertions(+), 26 deletions(-) diff --git a/packages/core-web/src/index.js b/packages/core-web/src/index.js index 525298e22b..0e459cd2cb 100644 --- a/packages/core-web/src/index.js +++ b/packages/core-web/src/index.js @@ -52,34 +52,54 @@ function detectAndApplyFixedHeaderStyles() { }`); insertCss(`.nav-menu-open { max-height: calc(100% - ${headerHeight}px); }`); + const resizeHeader = () => { + const newHeaderHeight = headerSelector.height(); + const sheets = document.styleSheets; + for (let i = 0; i < sheets.length; i += 1) { + const rules = sheets[i].cssRules; + // eslint-disable-next-line lodash/prefer-get + if (rules && rules[0] && rules[0].selectorText) { + switch (rules[0].selectorText) { + case '.fixed-header-padding': + sheets[i].deleteRule(0); + sheets[i].insertRule(`.fixed-header-padding { padding-top: ${newHeaderHeight}px !important }`); + break; + case 'span.anchor': + rules[0].style.top = `calc(-${newHeaderHeight}px - ${bufferHeight}rem)`; + break; + case 'span.card-container::before': + rules[0].style.marginTop = `calc(-${newHeaderHeight}px - ${bufferHeight}rem)`; + rules[0].style.height = `calc(${newHeaderHeight}px + ${bufferHeight}rem)`; + break; + case '.nav-menu-open': + rules[0].style.maxHeight = `calc(100% - ${newHeaderHeight}px + 50px)`; + break; + default: + break; + } + } + } + }; + + const toggleHeaderOverflow = () => { + const headerMaxHeight = headerSelector.css('max-height'); + if (headerMaxHeight === '100%') { + headerSelector.css('overflow', ''); + resizeHeader(); + } + }; + const addResizeHeaderListener = () => { const resizeObserver = new ResizeObserver(() => { - const newHeaderHeight = headerSelector.height(); - const sheets = document.styleSheets; - for (let i = 0; i < sheets.length; i += 1) { - const rules = sheets[i].cssRules; - // eslint-disable-next-line lodash/prefer-get - if (rules && rules[0] && rules[0].selectorText) { - switch (rules[0].selectorText) { - case '.fixed-header-padding': - sheets[i].deleteRule(0); - sheets[i].insertRule(`.fixed-header-padding { padding-top: ${newHeaderHeight}px !important }`); - break; - case 'span.anchor': - rules[0].style.top = `calc(-${newHeaderHeight}px - ${bufferHeight}rem)`; - break; - case 'span.card-container::before': - rules[0].style.marginTop = `calc(-${newHeaderHeight}px - ${bufferHeight}rem)`; - rules[0].style.height = `calc(${newHeaderHeight}px + ${bufferHeight}rem)`; - break; - case '.nav-menu-open': - rules[0].style.maxHeight = `calc(100% - ${newHeaderHeight}px + 50px)`; - break; - default: - break; - } - } + const headerMaxHeight = headerSelector.css('max-height'); + // set overflow to hidden if max-height is not 100% + if (headerMaxHeight !== '100%') { + headerSelector.css('overflow', 'hidden'); + // re-check after 0.6s to account for transition time + setTimeout(toggleHeaderOverflow, 600); + return; } + resizeHeader(); }); resizeObserver.observe(headerSelector[0]); }; diff --git a/packages/core-web/src/styles/markbind.css b/packages/core-web/src/styles/markbind.css index ce458aa749..e6e1fb37c9 100644 --- a/packages/core-web/src/styles/markbind.css +++ b/packages/core-web/src/styles/markbind.css @@ -119,7 +119,6 @@ code.hljs.inline { header[fixed] { max-height: 100%; - overflow: hidden; position: fixed; transition: max-height 0.6s ease-in; width: 100%; From 8fbe4d07521f8baecc0e05b341b4a859ce09a701 Mon Sep 17 00:00:00 2001 From: jonahtanjz Date: Sun, 14 Feb 2021 15:53:15 +0800 Subject: [PATCH 5/6] Add event listener for tranistion end --- packages/core-web/src/index.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/core-web/src/index.js b/packages/core-web/src/index.js index 0e459cd2cb..faf296de04 100644 --- a/packages/core-web/src/index.js +++ b/packages/core-web/src/index.js @@ -95,8 +95,6 @@ function detectAndApplyFixedHeaderStyles() { // set overflow to hidden if max-height is not 100% if (headerMaxHeight !== '100%') { headerSelector.css('overflow', 'hidden'); - // re-check after 0.6s to account for transition time - setTimeout(toggleHeaderOverflow, 600); return; } resizeHeader(); @@ -121,6 +119,7 @@ function detectAndApplyFixedHeaderStyles() { }; addResizeHeaderListener(); + headerSelector[0].addEventListener('transitionend', toggleHeaderOverflow); window.addEventListener('scroll', toggleHeaderOnScroll); } From c7c249673348c3660affc8f61935915a884d3a88 Mon Sep 17 00:00:00 2001 From: jonahtanjz Date: Sun, 14 Feb 2021 17:54:12 +0800 Subject: [PATCH 6/6] Update after review --- packages/core-web/src/index.js | 30 ++++++++++++++---------------- 1 file changed, 14 insertions(+), 16 deletions(-) diff --git a/packages/core-web/src/index.js b/packages/core-web/src/index.js index faf296de04..5bd1770f60 100644 --- a/packages/core-web/src/index.js +++ b/packages/core-web/src/index.js @@ -52,7 +52,7 @@ function detectAndApplyFixedHeaderStyles() { }`); insertCss(`.nav-menu-open { max-height: calc(100% - ${headerHeight}px); }`); - const resizeHeader = () => { + const adjustHeaderClasses = () => { const newHeaderHeight = headerSelector.height(); const sheets = document.styleSheets; for (let i = 0; i < sheets.length; i += 1) { @@ -83,25 +83,14 @@ function detectAndApplyFixedHeaderStyles() { const toggleHeaderOverflow = () => { const headerMaxHeight = headerSelector.css('max-height'); + // reset overflow when header shows again to allow content + // in the header such as search dropdown etc. to overflow if (headerMaxHeight === '100%') { headerSelector.css('overflow', ''); - resizeHeader(); + adjustHeaderClasses(); } }; - const addResizeHeaderListener = () => { - const resizeObserver = new ResizeObserver(() => { - const headerMaxHeight = headerSelector.css('max-height'); - // set overflow to hidden if max-height is not 100% - if (headerMaxHeight !== '100%') { - headerSelector.css('overflow', 'hidden'); - return; - } - resizeHeader(); - }); - resizeObserver.observe(headerSelector[0]); - }; - let lastOffset = 0; const toggleHeaderOnScroll = () => { // prevent toggling of header on desktop site @@ -118,7 +107,16 @@ function detectAndApplyFixedHeaderStyles() { lastOffset = currentOffset; }; - addResizeHeaderListener(); + const resizeObserver = new ResizeObserver(() => { + const headerMaxHeight = headerSelector.css('max-height'); + // hide header overflow when user scrolls to support transition effect + if (headerMaxHeight !== '100%') { + headerSelector.css('overflow', 'hidden'); + return; + } + adjustHeaderClasses(); + }); + resizeObserver.observe(headerSelector[0]); headerSelector[0].addEventListener('transitionend', toggleHeaderOverflow); window.addEventListener('scroll', toggleHeaderOnScroll); }