Remove navbar clone; instead render navbar using position: sticky (#358)

stefanv · web-flow · commit 028f30292b7f · 2023-11-01T14:28:21.000-07:00
diff --git a/assets/js/shortcuts.js b/assets/js/shortcuts.js
@@ -22,26 +22,13 @@ function throttle(fn, interval) {
   };
 }
 
-function scrollNavbar() {
-  const scrollPosition = document.documentElement.scrollTop;
-
-  //Navbar Clone
-  const navbarClone = document.getElementById("navbar-clone");
-
-  // Make navbar sticky, by activating a second, duplicate navbar
-  // that is fixed to the top of the screen.
-  navbarClone.classList.toggle("is-active", scrollPosition > 50);
-}
-
 // Highlight currently scrolled to header in shortcuts
 // Based on https://stackoverflow.com/a/32396543/214686
 // and
 // https://stackoverflow.com/a/57494988/214686
 // which fixes some issues with the first, particularly
 // around scrolling upward.
-function scrollHeadersAndNavbar() {
-  scrollNavbar();
-
+function scrollHeaders() {
   const scrollPosition = document.documentElement.scrollTop;
   const headers = Array.from(
     document.querySelectorAll(":is(h1, h2, h3, h4, h5, h6)[id]"),
@@ -79,14 +66,14 @@ function scrollHeadersAndNavbar() {
   });
 }
 
-const throttledScrollHeadersAndNavbar = throttle(scrollHeadersAndNavbar, 100);
+const throttledScrollHeaders = throttle(scrollHeaders, 100);
 
 function bindScroll() {
-  window.addEventListener("scroll", throttledScrollHeadersAndNavbar);
+  window.addEventListener("scroll", throttledScrollHeaders);
 }
 
 function unbindScroll() {
-  window.removeEventListener("scroll", throttledScrollHeadersAndNavbar);
+  window.removeEventListener("scroll", throttledScrollHeaders);
 }
 
 function remToPx(rem) {
@@ -142,9 +129,6 @@ function setupShortcuts(shortcutDepth = 2) {
           // Done moving to clicked header; re-enable
           // scroll highlighting of shortcuts
           bindScroll();
-
-          // After scroll, display the navbar, if necessary
-          scrollNavbar();
         });
       });
     });
diff --git a/assets/theme-css/fresh.css b/assets/theme-css/fresh.css
@@ -1,5 +1,6 @@
 .navbar.is-fresh {
-  position: relative;
+  position: sticky;
+  top: 0px;
   min-height: 3.8rem;
   transition: all 0.3s;
   z-index: 99;
@@ -70,18 +71,6 @@
 .navbar.is-fresh.is-fixed a:hover {
   color: #4fc1ea;
 }
-#navbar-clone {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  transform: translateY(-100%);
-  z-index: 100;
-  box-shadow: 0 0 8px rgba(0, 0, 0, 0.12);
-}
-#navbar-clone.is-active {
-  transform: translateY(0);
-}
 .animated {
   animation-duration: 0.5s;
   animation-fill-mode: both;
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -24,7 +24,6 @@
   <body>
     {{ block "navbar" . }}
     {{ partial "navbar.html" . -}}
-    {{ partial "navbar-clone.html" . -}}
     {{ end }}
 
     {{ block "main" . }}
