Fix the entire header using class="header-fixed"

MarkBind · Jan 20, 2020 · 2afffd9 · 2afffd9
1 parent 9229064
commit 2afffd9
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git a/asset/css/markbind.css b/asset/css/markbind.css
@@ -84,6 +84,15 @@ code.hljs.inline {
   * This section covers the common styles used within Header, Footer and Side Navigation bars
   */
 
+/* Header */
+
+header,
+.header-fixed {
+    position: fixed;
+    width: 100%;
+    z-index: 9999;
+}
+
 /* #app is treated as the main container */
 #app {
     display: flex;

diff --git a/asset/js/setup.js b/asset/js/setup.js
@@ -26,13 +26,13 @@ function insertCss(cssCode) {
 }
 
 function setupAnchors() {
-  const navBarSelector = jQuery('nav, .navbar');
-  const isFixed = navBarSelector.filter('.navbar-fixed').length !== 0;
-  const navbarHeight = navBarSelector.height();
+  const headerSelector = jQuery('header');
+  const isFixed = headerSelector.filter('.header-fixed').length !== 0;
+  const headerHeight = headerSelector.height();
   const topPadding = 1;
   if (isFixed) {
-    jQuery('.nav-inner').css('padding-top', `calc(${navbarHeight}px + ${2 * topPadding}rem)`);
-    jQuery('#content-wrapper').css('padding-top', `calc(${navbarHeight}px + ${2 * topPadding}rem)`);
+    jQuery('.nav-inner').css('padding-top', `calc(${headerHeight}px + ${2 * topPadding}rem)`);
+    jQuery('#content-wrapper').css('padding-top', `calc(${headerHeight}px + ${2 * topPadding}rem)`);
   }
   jQuery('h1, h2, h3, h4, h5, h6, .header-wrapper').each((index, heading) => {
     if (heading.id) {
@@ -57,7 +57,7 @@ function setupAnchors() {
         );
         jQuery(heading).removeAttr('id'); // to avoid duplicated id problem
         const headingHeight = jQuery(heading).height();
-        const heightOffset = navbarHeight + headingHeight;
+        const heightOffset = headerHeight + headingHeight;
         const spanCss = `span#${spanId} { margin-top: calc(-${heightOffset}px - ${topPadding}rem);\n`
           + '    display: block;\n'
           + `    height: calc(${heightOffset}px + ${topPadding}rem);\n`