ADD rel-tag to socials, ADD scrolleventlistener, ADD totop-button, ADD scroll progress bar

This commit is contained in:
Hoernschen 2024-01-08 10:23:35 +01:00
parent 553285c04b
commit a25ea40300
Signed by: hoernschen
GPG key ID: 37591FAF4E6D3462
9 changed files with 105 additions and 17 deletions

12
static/js/scroll.js Normal file
View file

@ -0,0 +1,12 @@
window.addEventListener("scroll", () => {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById('progress').style.width = scrolled + "%";
const toTop = document.getElementById('totop');
if ((window.scrollY > 0 && !toTop.classList.contains("show")) || (window.scrollY <= 0 && toTop.classList.contains("show"))) {
toTop.classList.toggle("show");
}
});

View file

@ -1,3 +1,5 @@
// https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#aa-using-a-body-class
window.onload = (event) => {
const btn = document.getElementById("theme-toggler");
const darkTheme = window.matchMedia("(prefers-color-scheme: dark)");