Fix header padding fouc (1st version w/ dynamically fixed header)

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;
 }

docs/userGuide/tweakingThePageStructure.md

@@ -155,13 +155,18 @@ Headers are commonly included inside the html `<header>` tag. In encouraging thi
 ****To fix the `<header>`****
 1. Add the `fixed` attribute to your `<header>` 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.
 
 <box type="tip" seamless>
 
 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.
 </box>
 
+<box type="warning" header="When `fixed` positioning is applied" seamless>
+
+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 `<header>` 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.
+</box>
+
 ---
 
 ### Constructing a site navigation menu easily

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;
 }

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;
 }

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;
 }

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

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 */

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;
 }