keep mobile nav sticky on scroll (#347)

processing · May 8, 2024 · 9a1c2bc · 9a1c2bc
1 parent f2c3e9b
commit 9a1c2bc
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/src/components/Settings/script.js b/src/components/Settings/script.js
@@ -69,13 +69,17 @@ window.addEventListener(
  "scroll",
  () => {
  let currentScroll = window.scrollY || document.documentElement.scrollTop;
- if (
+ // if we're scrolled up to where the container lives, close immediately
+ if (currentScroll < 120) {
+ closeSettings();
+ } else if (
  lastScrollTop > currentScroll &&
  lastScrollTop - currentScroll > SCROLL_THRESHOLD &&
  !isContainerVisible // Only trigger on scroll if the container is not visible
  ) {
  openSettings(true);
  }
+
  lastScrollTop = currentScroll <= 0 ? 0 : currentScroll;
  },
  false,

diff --git a/src/components/Settings/styles.module.scss b/src/components/Settings/styles.module.scss
@@ -94,5 +94,5 @@
 }
 
 .wrapper:global(.open) {
- top: 0;
+ top: 80px;
 }
diff --git a/styles/global.scss b/styles/global.scss
@@ -226,13 +226,15 @@ hr {
  }
 
  .dark-theme & {
- background-color: #DDD !important;
+ background-color: #ddd !important;
  filter: invert(100%);
  }
 }
 
-.astro-code pre, pre.astro-code,
-.code-box pre, pre.code-box {
+.astro-code pre,
+pre.astro-code,
+.code-box pre,
+pre.code-box {
  white-space: break-spaces;
 }
 
@@ -276,9 +278,13 @@ hr {
 
  nav {
  width: var(--nav-width);
+ position: sticky;
  top: 0;
+ background-color: var(--sidebar-bg-color);
+ z-index: 10000;
 
  @media (min-width: $breakpoint-tablet) {
+ position: fixed;
  height: 100vh;
  }
  }