Hide subtitle and breadcrumbs from hero once stuck

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");

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;
   }