repos/website
1
Fork 0
Code Issues 1 Pull Requests 30 Activity

Add a shadow to the hero when it scrolls

Browse Source 
Sadly done in JS, but it's much much easier this way
This commit is contained in:
Jake Howard 2022-07-20 22:39:35 +01:00
parent fafc0e8828
commit 38cc5182ca
Signed by: jake
GPG Key ID: 57AFB45680EDD477
4 changed files with 27 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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"
}
}

11
static/src/js/base.js
View File

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

4
static/src/scss/_hero.scss
View File

@ -14,6 +14,10 @@ section.hero {
background-color: $white;
display: block;
&.stuck {
box-shadow: $shadow;
}
.hero-body {
padding: 0;
}