From 38cc5182ca1856143cff9ac451297bfcd01ff65e Mon Sep 17 00:00:00 2001
From: Jake Howard <git@theorangeone.net>
Date: Wed, 20 Jul 2022 22:39:35 +0100
Subject: [PATCH] Add a shadow to the hero when it scrolls

Sadly done in JS, but it's much much easier this way
---
 package-lock.json          | 11 +++++++++++
 package.json               |  1 +
 static/src/js/base.js      | 11 +++++++++++
 static/src/scss/_hero.scss |  4 ++++
 4 files changed, 27 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index a2eae50..28ac950 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "firacode": "^6.2.0",
         "lite-youtube-embed": "^0.2.0",
         "lodash.debounce": "^4.0.8",
+        "lodash.throttle": "^4.1.1",
         "shareon": "^2.0.0"
       },
       "devDependencies": {
@@ -1104,6 +1105,11 @@
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
     },
+    "node_modules/lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
+    },
     "node_modules/memorystream": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
@@ -2323,6 +2329,11 @@
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
     },
+    "lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
+    },
     "memorystream": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
diff --git a/package.json b/package.json
index 6690a2d..aac92d1 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "firacode": "^6.2.0",
     "lite-youtube-embed": "^0.2.0",
     "lodash.debounce": "^4.0.8",
+    "lodash.throttle": "^4.1.1",
     "shareon": "^2.0.0"
   }
 }
diff --git a/static/src/js/base.js b/static/src/js/base.js
index f38e446..67fbeee 100644
--- a/static/src/js/base.js
+++ b/static/src/js/base.js
@@ -1,5 +1,6 @@
 const Elevator = require("elevator.js");
 const debounce = require("lodash.debounce");
+const throttle = require("lodash.throttle");
 
 const HERO = document.querySelector("section.hero");
 const ROOT = document.querySelector(":root");
@@ -12,6 +13,14 @@ function setHeroHeight() {
   ROOT.style.setProperty("--hero-height", `${getHeroHeight()}px`);
 }
 
+function handleHeroStuck() {
+  if (HERO.getBoundingClientRect().top === 0) {
+    HERO.classList.add("stuck");
+  } else {
+    HERO.classList.remove("stuck");
+  }
+}
+
 window.addEventListener("load", () => {
   const navbarBurger = document.getElementById("navbar-burger");
   const navbar = document.getElementById("navbar");
@@ -49,3 +58,5 @@ window.addEventListener("load", () => {
 
 window.addEventListener("resize", debounce(setHeroHeight, 2000));
 window.addEventListener("load", setHeroHeight);
+
+window.addEventListener("scroll", throttle(handleHeroStuck, 100));
diff --git a/static/src/scss/_hero.scss b/static/src/scss/_hero.scss
index abb11b2..0790e4c 100644
--- a/static/src/scss/_hero.scss
+++ b/static/src/scss/_hero.scss
@@ -14,6 +14,10 @@ section.hero {
   background-color: $white;
   display: block;
 
+  &.stuck {
+    box-shadow: $shadow;
+  }
+
   .hero-body {
     padding: 0;
   }