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

15
static/style.css
View file

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