MarkBind · ang-zeyu · May 13, 2022
diff --git a/docs/_markbind/layouts/default.md b/docs/_markbind/layouts/default.md
@@ -1,7 +1,7 @@
-<include src="headers/header.md" />
+{% include "_markbind/layouts/headers/header.md" %}
 
 <div id="flex-body">
-  <div id="content-wrapper" class="fixed-header-padding">
+  <div id="content-wrapper">
     {{ content }}
   </div>
 </div>

diff --git a/docs/_markbind/layouts/devGuide.md b/docs/_markbind/layouts/devGuide.md
@@ -1,7 +1,7 @@
-<include src="headers/header.md" />
+{% include "_markbind/layouts/headers/header.md" %}
 
 <div id="flex-body">
-  <nav id="site-nav" class="fixed-header-padding">
+  <nav id="site-nav">
     <div class="site-nav-top">
       <div class="fw-bold mb-2" style="font-size: 1.25rem;">Developer Guide</div>
     </div>
@@ -27,10 +27,10 @@
       </site-nav>
     </div>
   </nav>
-  <div id="content-wrapper" class="fixed-header-padding">
+  <div id="content-wrapper">
     {{ content }}
   </div>
-  <nav id="page-nav" class="fixed-header-padding">
+  <nav id="page-nav">
     <div class="nav-component slim-scroll">
       <page-nav />
     </div>

diff --git a/docs/_markbind/layouts/headers/header.md b/docs/_markbind/layouts/headers/header.md
@@ -2,7 +2,9 @@
   <link rel="stylesheet" href="{{baseUrl}}/css/main.css">
 </head-bottom>
 
-<header fixed>
+This is a breaking change
+
+<header sticky>
   <navbar type="dark">
     <a slot="brand" href="{{baseUrl}}/index.html" title="Home" class="navbar-brand"><img src="{{baseUrl}}/images/logo-darkbackground.svg" height="20"></a>
     <li><a highlight-on="exact" href="{{baseUrl}}/index.html" class="nav-link">HOME</a></li>

diff --git a/docs/_markbind/layouts/userGuide.md b/docs/_markbind/layouts/userGuide.md
@@ -1,7 +1,7 @@
-<include src="headers/header.md" />
+{% include "_markbind/layouts/headers/header.md" %}
 
 <div id="flex-body">
-  <nav id="site-nav" class="fixed-header-padding">
+  <nav id="site-nav">
     <div class="site-nav-top">
       <div class="fw-bold mb-2" style="font-size: 1.25rem;">User Guide</div>
     </div>
@@ -44,10 +44,10 @@
       </site-nav>
     </div>
   </nav>
-  <div id="content-wrapper" class="fixed-header-padding">
+  <div id="content-wrapper">
     {{ content }}
   </div>
-  <nav id="page-nav" class="fixed-header-padding">
+  <nav id="page-nav">
     <div class="nav-component slim-scroll">
       <page-nav />
     </div>

diff --git 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
@@ -46,8 +46,8 @@ Next, edit the layout file to your liking, and add the `{% raw %}{{ content }}{%
   <link rel="stylesheet" href="{{baseUrl}}/css/main.css">
 </head-bottom>
 
-<!-- Fix the header to the top while scrolling using the fixed attribute in a <header> tag -->
-<header fixed>
+<!-- Create a sticky header using the sticky attribute in a <header> tag -->
+<header sticky>
   <navbar type="dark">
     <a slot="brand" href="{{baseUrl}}/index.html" title="Home" class="navbar-brand">
       <img src="{{baseUrl}}/images/logo-darkbackground.svg" height="20">
@@ -70,8 +70,7 @@ Next, edit the layout file to your liking, and add the `{% raw %}{{ content }}{%
 </header>
 
 <div id="flex-body">
-  <!-- Push content downward when using a fixed header with the fixed-header-padding class -->
-  <nav id="site-nav" class="fixed-header-padding">
+  <nav id="site-nav">
     <div class="site-nav-top">
       <div class="fw-bold mb-2" style="font-size: 1.25rem;">User Guide</div>
     </div>
@@ -87,11 +86,11 @@ Next, edit the layout file to your liking, and add the `{% raw %}{{ content }}{%
       </site-nav>
     </div>
   </nav>
-  <div id="content-wrapper" class="fixed-header-padding">
+  <div id="content-wrapper">
     <!-- Insert the page's content into the layout using the {{ content }} variable -->
     {{ content }}
   </div>
-  <nav id="page-nav" class="fixed-header-padding">
+  <nav id="page-nav">
     <div class="nav-component slim-scroll">
       <!-- Insert a page navigation menu using the <page-nav /> component -->
       <page-nav />
@@ -148,19 +147,11 @@ If you wish insert scripts at the bottom, before MarkBind's scripts, simply inse
 
 ---
 
-### Fixing the header to the top
+### Sticking the header to the top
 
-Headers are commonly included inside the html `<header>` tag. In encouraging this, a convenient interface to implement <tooltip content="Headers that stick to the top of the page while scrolling the content">fixed headers</tooltip> surrounding the `<header>` tag is provided that ensures page anchors work correctly.
+Headers are commonly included inside the html `<header>` tag. In encouraging this, a convenient interface to implement sticky headers using the `<header>` tag is provided that **ensures page anchors are positioned** correctly.
 
-****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.
-
-<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>
+Simply add the `sticky` attribute to your `<header>` element in the layout per the above example.
 
 ---
 

diff --git a/packages/cli/test/functional/test_site/_markbind/layouts/default.md b/packages/cli/test/functional/test_site/_markbind/layouts/default.md
@@ -11,18 +11,18 @@
 <include src="headers/header.md" />
 
 <div id="flex-body">
-  <nav id="site-nav" class="fixed-header-padding">
+  <nav id="site-nav">
     <div class="site-nav-top">
       <div class="fw-bold mb-2" style="font-size: 1.25rem;"><markdown>## {{ layoutName or "Default Layout" }}</markdown></div>
     </div>
     <div class="nav-component slim-scroll">
       <include src="navigation/site-nav.md" />
     </div>
   </nav>
-  <div id="content-wrapper" class="fixed-header-padding">
+  <div id="content-wrapper">
     {{ content }}
   </div>
-  <nav id="page-nav" class="fixed-header-padding">
+  <nav id="page-nav">
     <div class="nav-component slim-scroll">
       <page-nav />
     </div>

diff --git 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/...st/functional/test_site_convert/test_basic_convert/non_markbind_site/stylesheets/main.css b/...st/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/...nctional/test_site_convert/test_navigation_convert/non_markbind_site/stylesheets/main.css b/...nctional/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
@@ -21,16 +21,16 @@ function scrollToUrlAnchorHeading() {
   }
 }
 
-function detectAndApplyFixedHeaderStyles() {
+function detectAndApplyStickyHeaderStyles() {
   jQuery(':header').each((index, heading) => {
     if (heading.id) {
       jQuery(heading).removeAttr('id'); // to avoid duplicated id problem
     }
   });
 
-  const headerSelector = jQuery('header[fixed]');
-  const isFixed = headerSelector.length !== 0;
-  if (!isFixed) {
+  const headerSelector = jQuery('header[sticky]');
+  const isSticky = headerSelector.length !== 0;
+  if (!isSticky) {
     return;
   }
 
@@ -39,11 +39,11 @@ function detectAndApplyFixedHeaderStyles() {
     document.documentElement.style.setProperty('--header-height', `${newHeaderHeight}px`);
   };
 
+  let isHidden = false;
   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%') {
+    if (!isHidden) {
       headerSelector.css('overflow', '');
       updateHeaderHeight();
     }
@@ -57,6 +57,7 @@ function detectAndApplyFixedHeaderStyles() {
 
     if (lastHash !== window.location.hash) {
       lastHash = window.location.hash;
+      isHidden = true;
       headerSelector.removeClass('hide-header');
       return;
     }
@@ -74,17 +75,18 @@ function detectAndApplyFixedHeaderStyles() {
         return;
       }
 
+      isHidden = true;
       headerSelector.addClass('hide-header');
     } else {
+      isHidden = false;
       headerSelector.removeClass('hide-header');
     }
     lastOffset = currentOffset;
   };
 
   const resizeObserver = new ResizeObserver(() => {
-    const headerMaxHeight = headerSelector.css('max-height');
     // hide header overflow when user scrolls to support transition effect
-    if (headerMaxHeight !== '100%') {
+    if (isHidden) {
       headerSelector.css('overflow', 'hidden');
       return;
     }
@@ -125,7 +127,7 @@ function restoreStyleTags() {
 function executeAfterMountedRoutines() {
   restoreStyleTags();
   scrollToUrlAnchorHeading();
-  detectAndApplyFixedHeaderStyles();
+  detectAndApplyStickyHeaderStyles();
 }
 
 window.handleSiteNavClick = function (elem, useAnchor = true) {

diff --git a/packages/core-web/src/styles/markbind.css b/packages/core-web/src/styles/markbind.css
@@ -127,32 +127,28 @@ code.hljs.inline {
 
 /* Header */
 
-header[fixed] {
-    max-height: 100%;
-    position: fixed;
-    transition: max-height 0.6s ease-in;
+header[sticky] {
+    position: sticky;
+    top: 0;
+    transition: transform 0.6s ease-in;
     width: 100%;
     z-index: 1001;
 }
 
-header[fixed].hide-header {
-    max-height: 0;
-    transition: max-height 0.6s ease-out;
+header[sticky].hide-header {
+    transform: translateY(calc(-1 * var(--header-height)));
+    transition: transform 0.6s ease-out;
 }
 
 span.anchor {
     position: relative;
     top: calc(-1 * var(--header-height) - 1rem);
 }
 
-header[fixed] .nav-menu-open {
+header[sticky] .nav-menu-open {
     max-height: calc(-1 * var(--header-height) + 100% + 50px);
 }
 
-.fixed-header-padding {
-    padding-top: var(--header-height) !important;
-}
-
 /* #app is treated as the main container */
 #app {
     display: flex;

diff --git a/packages/core/src/Site/siteConvertLayout.njk b/packages/core/src/Site/siteConvertLayout.njk
@@ -2,7 +2,7 @@
   <link rel="stylesheet" href="{% raw %}{{baseUrl}}{% endraw %}/stylesheets/main.css">
 </head-bottom>
 
-<header fixed>
+<header sticky>
   <navbar placement="top" type="inverse">
     <a slot="brand" href="{% raw %}{{baseUrl}}{% endraw %}/index.html" title="Home" class="navbar-brand">
       <i class="far fa-file-image"></i>
@@ -18,7 +18,7 @@
 </header>
 
 <div id="flex-body">
-  <nav id="site-nav" class="fixed-header-padding">
+  <nav id="site-nav">
     <div class="site-nav-top">
       <div class="fw-bold mb-2" style="font-size: 1.25rem;">Template</div>
     </div>
@@ -28,10 +28,10 @@
       </site-nav>
     </div>
   </nav>
-  <div id="content-wrapper" class="fixed-header-padding">
+  <div id="content-wrapper">
     {% raw %}{{ content }}{% endraw %}
   </div>
-  <nav id="page-nav" class="fixed-header-padding">
+  <nav id="page-nav">
     <div class="nav-component slim-scroll">
       <page-nav />
     </div>

diff --git a/packages/core/src/html/NodeProcessor.js b/packages/core/src/html/NodeProcessor.js
@@ -305,7 +305,7 @@ class NodeProcessor {
       setHeadingId(node, this.config);
     }
 
-    // If a fixed header is applied to the page, generate dummy spans as anchor points
+    // If a sticky header is applied to the page, generate dummy spans as anchor points
     if (isHeadingTag && node.attribs.id) {
       cheerio(node).prepend(`<span id="${node.attribs.id}" class="anchor"></span>`);
     }