From 48d284be8a2acd79b0aa1d42a0c3f1915585938c Mon Sep 17 00:00:00 2001 From: Ze Yu Date: Fri, 13 May 2022 15:02:18 +0800 Subject: [PATCH] Simplest fix --- docs/css/main.css | 4 ++-- docs/userGuide/tweakingThePageStructure.md | 7 ++++++- .../functional/test_site/stylesheets/styles.css | 4 ++-- .../non_markbind_site/stylesheets/main.css | 4 ++-- .../non_markbind_site/stylesheets/main.css | 4 ++-- packages/core-web/src/index.js | 14 ++++++++++++++ packages/core-web/src/styles/markbind.css | 13 +++++++++++-- .../core/template/default/stylesheets/main.css | 4 ++-- 8 files changed, 41 insertions(+), 13 deletions(-) diff --git a/docs/css/main.css b/docs/css/main.css index 1963c65fd0..21356e46d0 100644 --- a/docs/css/main.css +++ b/docs/css/main.css @@ -56,7 +56,8 @@ mark { margin: 0 auto; min-width: 0; max-width: 1000px; - padding: 0.8rem 20px 0 20px; + padding: 0 20px; + margin-top: 0.8rem; transition: 0.4s; -webkit-transition: 0.4s; } @@ -66,7 +67,6 @@ mark { position: sticky; top: 0; flex: 0 0 auto; - padding-top: 1rem; max-width: 300px; width: 300px; } diff --git a/docs/userGuide/tweakingThePageStructure.md b/docs/userGuide/tweakingThePageStructure.md index 972c2a460d..739928a68f 100644 --- a/docs/userGuide/tweakingThePageStructure.md +++ b/docs/userGuide/tweakingThePageStructure.md @@ -155,13 +155,18 @@ Headers are commonly included inside the html `
` tag. In encouraging thi ****To fix the `
`**** 1. Add the `fixed` attribute to your `
` element in the layout per the above example. -2. Then, to add the necessary top padding for the main content, add the `fixed-header-padding` class to **elements that should be shifted down** in accordance with the fixed header. +2. Then, to add the necessary top padding for the main content, add the `fixed-header-padding` class to **elements that should be shifted down** in accordance with the height of the fixed header. If you are not sure where to put the `fixed-header-padding` attribute, you may also refer to the default template for `markbind init`, which already has this setup. + + +To detect the height of the fixed header for use in the `fixed-header-padding` class, runtime style detection is required. This results in improperly formatted content on page load for a brief period. To avoid this, the implementation here switches the `
` element to use `fixed` positioning, and adjusts the `fixed-header-padding` class's attribute only once the user has scrolled past the top of the header. + + --- ### Constructing a site navigation menu easily diff --git a/packages/cli/test/functional/test_site/stylesheets/styles.css b/packages/cli/test/functional/test_site/stylesheets/styles.css index c58b8a5120..5e0373a224 100644 --- a/packages/cli/test/functional/test_site/stylesheets/styles.css +++ b/packages/cli/test/functional/test_site/stylesheets/styles.css @@ -56,7 +56,8 @@ mark { margin: 0 auto; min-width: 0; max-width: 1000px; - padding: 0.8rem 20px 0 20px; + padding: 0 20px; + margin-top: 0.8rem; transition: 0.4s; -webkit-transition: 0.4s; } @@ -66,7 +67,6 @@ mark { position: sticky; top: 0; flex: 0 0 auto; - padding-top: 1rem; max-width: 300px; width: 300px; } diff --git a/packages/cli/test/functional/test_site_convert/test_basic_convert/non_markbind_site/stylesheets/main.css b/packages/cli/test/functional/test_site_convert/test_basic_convert/non_markbind_site/stylesheets/main.css index c58b8a5120..5e0373a224 100644 --- a/packages/cli/test/functional/test_site_convert/test_basic_convert/non_markbind_site/stylesheets/main.css +++ b/packages/cli/test/functional/test_site_convert/test_basic_convert/non_markbind_site/stylesheets/main.css @@ -56,7 +56,8 @@ mark { margin: 0 auto; min-width: 0; max-width: 1000px; - padding: 0.8rem 20px 0 20px; + padding: 0 20px; + margin-top: 0.8rem; transition: 0.4s; -webkit-transition: 0.4s; } @@ -66,7 +67,6 @@ mark { position: sticky; top: 0; flex: 0 0 auto; - padding-top: 1rem; max-width: 300px; width: 300px; } diff --git a/packages/cli/test/functional/test_site_convert/test_navigation_convert/non_markbind_site/stylesheets/main.css b/packages/cli/test/functional/test_site_convert/test_navigation_convert/non_markbind_site/stylesheets/main.css index 1963c65fd0..21356e46d0 100644 --- a/packages/cli/test/functional/test_site_convert/test_navigation_convert/non_markbind_site/stylesheets/main.css +++ b/packages/cli/test/functional/test_site_convert/test_navigation_convert/non_markbind_site/stylesheets/main.css @@ -56,7 +56,8 @@ mark { margin: 0 auto; min-width: 0; max-width: 1000px; - padding: 0.8rem 20px 0 20px; + padding: 0 20px; + margin-top: 0.8rem; transition: 0.4s; -webkit-transition: 0.4s; } @@ -66,7 +67,6 @@ mark { position: sticky; top: 0; flex: 0 0 auto; - padding-top: 1rem; max-width: 300px; width: 300px; } diff --git a/packages/core-web/src/index.js b/packages/core-web/src/index.js index 45091b6722..8a763dddb6 100644 --- a/packages/core-web/src/index.js +++ b/packages/core-web/src/index.js @@ -49,6 +49,20 @@ function detectAndApplyFixedHeaderStyles() { } }; + /* + Handle dynamically fixed header listener to + prevent FOUC from sudden quick movement of padding-top application. + see https://www.w3schools.com/howto/howto_js_sticky_header.asp + */ + const dynamicFixedHeaderListener = () => { + if (window.scrollY > headerSelector[0].offsetTop) { + document.documentElement.style.setProperty('--header-padding', 'var(--header-height)'); + document.documentElement.style.setProperty('--header-position', 'fixed'); + window.removeEventListener('scroll', dynamicFixedHeaderListener); + } + }; + window.addEventListener('scroll', dynamicFixedHeaderListener); + let lastOffset = 0; let lastHash = window.location.hash; const toggleHeaderOnScroll = () => { diff --git a/packages/core-web/src/styles/markbind.css b/packages/core-web/src/styles/markbind.css index ae59cbbda8..a137bb90bf 100644 --- a/packages/core-web/src/styles/markbind.css +++ b/packages/core-web/src/styles/markbind.css @@ -1,5 +1,7 @@ :root { --header-height: 0; + --header-padding: 0; + --header-position: 'static'; } a { @@ -128,8 +130,9 @@ code.hljs.inline { /* Header */ header[fixed] { + position: var(--header-position); + top: 0; max-height: 100%; - position: fixed; transition: max-height 0.6s ease-in; width: 100%; z-index: 1001; @@ -149,8 +152,14 @@ header[fixed] .nav-menu-open { max-height: calc(-1 * var(--header-height) + 100% + 50px); } +/* + Prevent sudden quick movement of page content with the dynamically fixed header. + The padding-top property is set dynamically according to the header height in index.js. + (see https://www.w3schools.com/howto/howto_js_sticky_header.asp) +*/ .fixed-header-padding { - padding-top: var(--header-height) !important; + padding-top: var(--header-padding) !important; + transition: padding-top 0s linear !important; } /* #app is treated as the main container */ diff --git a/packages/core/template/default/stylesheets/main.css b/packages/core/template/default/stylesheets/main.css index 1963c65fd0..21356e46d0 100644 --- a/packages/core/template/default/stylesheets/main.css +++ b/packages/core/template/default/stylesheets/main.css @@ -56,7 +56,8 @@ mark { margin: 0 auto; min-width: 0; max-width: 1000px; - padding: 0.8rem 20px 0 20px; + padding: 0 20px; + margin-top: 0.8rem; transition: 0.4s; -webkit-transition: 0.4s; } @@ -66,7 +67,6 @@ mark { position: sticky; top: 0; flex: 0 0 auto; - padding-top: 1rem; max-width: 300px; width: 300px; }