Add a shadow to the hero when it scrolls
Sadly done in JS, but it's much much easier this way
This commit is contained in:
parent
fafc0e8828
commit
38cc5182ca
4 changed files with 27 additions and 0 deletions
11
package-lock.json
generated
11
package-lock.json
generated
|
@ -15,6 +15,7 @@
|
||||||
"firacode": "^6.2.0",
|
"firacode": "^6.2.0",
|
||||||
"lite-youtube-embed": "^0.2.0",
|
"lite-youtube-embed": "^0.2.0",
|
||||||
"lodash.debounce": "^4.0.8",
|
"lodash.debounce": "^4.0.8",
|
||||||
|
"lodash.throttle": "^4.1.1",
|
||||||
"shareon": "^2.0.0"
|
"shareon": "^2.0.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
@ -1104,6 +1105,11 @@
|
||||||
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
|
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
|
||||||
"integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
|
"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": {
|
"node_modules/memorystream": {
|
||||||
"version": "0.3.1",
|
"version": "0.3.1",
|
||||||
"resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
|
"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",
|
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
|
||||||
"integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
|
"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": {
|
"memorystream": {
|
||||||
"version": "0.3.1",
|
"version": "0.3.1",
|
||||||
"resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
|
"resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
|
||||||
|
|
|
@ -27,6 +27,7 @@
|
||||||
"firacode": "^6.2.0",
|
"firacode": "^6.2.0",
|
||||||
"lite-youtube-embed": "^0.2.0",
|
"lite-youtube-embed": "^0.2.0",
|
||||||
"lodash.debounce": "^4.0.8",
|
"lodash.debounce": "^4.0.8",
|
||||||
|
"lodash.throttle": "^4.1.1",
|
||||||
"shareon": "^2.0.0"
|
"shareon": "^2.0.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
const Elevator = require("elevator.js");
|
const Elevator = require("elevator.js");
|
||||||
const debounce = require("lodash.debounce");
|
const debounce = require("lodash.debounce");
|
||||||
|
const throttle = require("lodash.throttle");
|
||||||
|
|
||||||
const HERO = document.querySelector("section.hero");
|
const HERO = document.querySelector("section.hero");
|
||||||
const ROOT = document.querySelector(":root");
|
const ROOT = document.querySelector(":root");
|
||||||
|
@ -12,6 +13,14 @@ function setHeroHeight() {
|
||||||
ROOT.style.setProperty("--hero-height", `${getHeroHeight()}px`);
|
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", () => {
|
window.addEventListener("load", () => {
|
||||||
const navbarBurger = document.getElementById("navbar-burger");
|
const navbarBurger = document.getElementById("navbar-burger");
|
||||||
const navbar = document.getElementById("navbar");
|
const navbar = document.getElementById("navbar");
|
||||||
|
@ -49,3 +58,5 @@ window.addEventListener("load", () => {
|
||||||
|
|
||||||
window.addEventListener("resize", debounce(setHeroHeight, 2000));
|
window.addEventListener("resize", debounce(setHeroHeight, 2000));
|
||||||
window.addEventListener("load", setHeroHeight);
|
window.addEventListener("load", setHeroHeight);
|
||||||
|
|
||||||
|
window.addEventListener("scroll", throttle(handleHeroStuck, 100));
|
||||||
|
|
|
@ -14,6 +14,10 @@ section.hero {
|
||||||
background-color: $white;
|
background-color: $white;
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
|
&.stuck {
|
||||||
|
box-shadow: $shadow;
|
||||||
|
}
|
||||||
|
|
||||||
.hero-body {
|
.hero-body {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue