From f16f22ad488129639410a939063873704625c50e Mon Sep 17 00:00:00 2001
From: Jake Howard <git@theorangeone.net>
Date: Sun, 2 Oct 2022 18:00:42 +0100
Subject: [PATCH] Hide subtitle and breadcrumbs from hero once stuck

---
 static/src/js/base.js      |  2 +-
 static/src/scss/_hero.scss | 33 +++++++++++++++++++--------------
 2 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/static/src/js/base.js b/static/src/js/base.js
index 547e671..1e34e0a 100644
--- a/static/src/js/base.js
+++ b/static/src/js/base.js
@@ -23,7 +23,7 @@ function scrollToElement(element, behavior = "smooth") {
 }
 
 function handleHeroStuck() {
-  if (HERO.getBoundingClientRect().top === 0) {
+  if (HERO.getBoundingClientRect().top <= 0) {
     HERO.classList.add("stuck");
   } else {
     HERO.classList.remove("stuck");
diff --git a/static/src/scss/_hero.scss b/static/src/scss/_hero.scss
index 7625e0e..8d49a17 100644
--- a/static/src/scss/_hero.scss
+++ b/static/src/scss/_hero.scss
@@ -5,8 +5,6 @@ img.hero {
 }
 
 section.hero {
-  position: sticky;
-  top: 0;
   z-index: 10;
   margin-top: 2rem;
   padding-top: 0.5rem;
@@ -18,8 +16,27 @@ section.hero {
     background-color: $dark-mode-background;
   }
 
+  .subtitle {
+    margin-bottom: 1rem;
+    font-weight: 300;
+  }
+
+  .title,
+  .subtitle {
+    @include dark-mode {
+      color: $dark-mode-text;
+    }
+  }
+
   &.stuck {
     box-shadow: $shadow;
+    position: sticky;
+    top: 0;
+
+    .breadcrumb,
+    .subtitle {
+      display: none;
+    }
   }
 
   .hero-body {
@@ -79,24 +96,12 @@ section.hero {
     }
   }
 
-  .subtitle {
-    margin-bottom: 1rem;
-    font-weight: 300;
-  }
-
   .title {
     margin-bottom: 0.75rem;
     font-weight: 300;
     font-size: 3.5rem;
   }
 
-  .title,
-  .subtitle {
-    @include dark-mode {
-      color: $dark-mode-text;
-    }
-  }
-
   .column {
     padding-bottom: unset;
   }