From 38cc5182ca1856143cff9ac451297bfcd01ff65e Mon Sep 17 00:00:00 2001 From: Jake Howard 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; }