Have animated scroll on table of contents

Animated and offset correctly with hero. Requires some extra JS to keep the height up to date.
This commit is contained in:
Jake Howard 2022-07-04 22:17:46 +01:00
parent 664e59cf37
commit e8c3ec86ae
Signed by: jake
GPG key ID: 57AFB45680EDD477
6 changed files with 44 additions and 4 deletions

11
package-lock.json generated
View file

@ -14,6 +14,7 @@
"elevator.js": "^1.0.1",
"firacode": "^6.2.0",
"lite-youtube-embed": "^0.2.0",
"lodash.debounce": "^4.0.8",
"shareon": "^2.0.0"
},
"devDependencies": {
@ -1098,6 +1099,11 @@
"node": ">=4"
}
},
"node_modules/lodash.debounce": {
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
"integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
},
"node_modules/memorystream": {
"version": "0.3.1",
"resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
@ -2312,6 +2318,11 @@
"strip-bom": "^3.0.0"
}
},
"lodash.debounce": {
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
"integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
},
"memorystream": {
"version": "0.3.1",
"resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",

View file

@ -26,6 +26,7 @@
"elevator.js": "^1.0.1",
"firacode": "^6.2.0",
"lite-youtube-embed": "^0.2.0",
"lodash.debounce": "^4.0.8",
"shareon": "^2.0.0"
}
}

View file

@ -1,4 +1,16 @@
const Elevator = require("elevator.js");
const debounce = require("lodash.debounce");
const HERO = document.querySelector("section.hero");
const ROOT = document.querySelector(":root");
function getHeroHeight() {
return HERO.getBoundingClientRect().height;
}
function setHeroHeight() {
ROOT.style.setProperty("--hero-height", `${getHeroHeight()}px`);
}
window.addEventListener("load", () => {
const navbarBurger = document.getElementById("navbar-burger");
@ -15,6 +27,17 @@ window.addEventListener("load", () => {
});
});
document.querySelectorAll("#table-of-contents li a").forEach((element) => {
element.addEventListener("click", (event) => {
event.preventDefault();
const rect = document
.querySelector(event.target.hash)
.getBoundingClientRect();
const top = rect.top - getHeroHeight();
window.scrollBy({ top: top, behavior: "smooth" });
});
});
const elevatorButton = document.getElementById("to-top-elevator");
new Elevator({
element: elevatorButton,
@ -23,3 +46,6 @@ window.addEventListener("load", () => {
preloadAudio: false,
});
});
window.addEventListener("resize", debounce(setHeroHeight, 2000));
window.addEventListener("load", setHeroHeight);

View file

@ -3,3 +3,5 @@
$container-max-width: $widescreen;
$pre-background: unset;
$family-code: "Fira Code", monospace;
$dropdown-content-radius: 0px;
$dropdown-content-offset: 0px;

View file

@ -8,7 +8,7 @@ section.content {
h5,
h6 {
.heading-anchor {
scroll-margin-top: 160px; // navbar height (ish)
scroll-margin-top: var(--hero-height); // navbar height (ish)
margin-right: 0.5rem;
}
}

View file

@ -19,16 +19,16 @@
</div>
<div class="column is-narrow dropdown-wrapper is-hidden-touch is-grouped">
{% if page.table_of_contents %}
<div class="dropdown is-hoverable is-right">
<div class="dropdown is-hoverable is-right" id="table-of-contents">
<div class="dropdown-trigger">
<button class="button is-radiusless" aria-haspopup="true" aria-controls="dropdown-menu">
<button class="button is-radiusless" aria-haspopup="true" aria-controls="toc-menu">
<span>Table of Contents</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-menu" id="toc-menu" role="menu">
<div class="dropdown-content menu">
<ul class="menu-list">
{% for toc_item in page.table_of_contents %}