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 => {

15
static/style.css
View file

@ -47,6 +47,7 @@ nav{
nav.small{
height: 66px;
background: var(--primary);
}
nav .inner-width{
@ -64,7 +65,7 @@ nav img{
}
nav.small img{
height: 46px;
height: 41px;
}
.nav-links a{
@ -108,10 +109,20 @@ nav.small img{
transition: var(--baseTransition);
}
nav.small .nav-links a:last-child{
background: var(--color);
color: var(--primary);
}
.nav-links a:last-child:hover{
background: var(--secondary);
}
nav.small .nav-links a:last-child:hover{
background: var(--secondary);
color: var(--color);
}
.nav-toggle{
display: none;
}
@ -328,6 +339,7 @@ nav.small img{
border-radius: var(--baseRadius);
transition: var(--baseTransition);
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.705);
overflow: hidden;
}
@media (pointer: fine){
@ -339,6 +351,7 @@ nav.small img{
background-position: center;
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.705);
cursor: pointer;
overflow: hidden;
}
.card-first{