michi.vonah/website-v3
1
0
Fork 0
mirror of https://github.com/michivonah/website-v3.git synced 2025-12-22 21:36:28 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

add class toggle on scroll to navbar for class small

Browse source
This commit is contained in:
Michi 2025-03-13 22:20:15 +01:00
parent 2207010f06
commit 3075ea4b90
2 changed files with 21 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

8
static/main.js
View file

@ -1,10 +1,12 @@
// Add event listeners
document.addEventListener('DOMContentLoaded', function(){
scrollTopVisibilityUpdate();
updateNavStyle();
});
window.addEventListener('scroll', function(){
scrollTopVisibilityUpdate();
updateNavStyle();
});
document.querySelector(".nav-toggle").addEventListener('click', function(){
@ -41,13 +43,17 @@ function toggleNav(){
switchClasses(".nav-toggle i", "ai-text-align-right", "ai-cross");
}
// scroll top visibility
// class toggle on scroll
function scrollTopVisibilityUpdate(){
const scrollTop = document.querySelector(".scroll-top");
scrollTop.style.display = ((window.scrollY > 20) ? 'flex' : 'none');
scrollTop.style.right = ((window.scrollY > 20) ? '0' : '-55px');
}
function updateNavStyle(){
document.querySelector("nav").classList.toggle("small", window.scrollY > 20);
}
// intersection observer for animations
// credits: https://coolcssanimation.com/how-to-trigger-a-css-animation-on-scroll/
const observer = new IntersectionObserver(entries => {