mirror of
https://github.com/Fluffy-Bean/GameExpo23.git
synced 2025-05-14 14:22:16 +00:00
Fix nav height not being updated unless window is resized
This commit is contained in:
parent
85986048da
commit
e6794d42af
5 changed files with 13 additions and 8 deletions
File diff suppressed because one or more lines are too long
|
@ -1,5 +1,5 @@
|
||||||
const defaultTitle="DV8 Game Expo <span>2023</span>";let navSpacing=(3*16);let prevElement=null;window.onscroll=()=>{scrollFunction();checkSection();};window.onload=()=>{scrollFunction()};window.onresize=()=>{if(window.innerWidth>600){navSpacing=(3*16);}else{navSpacing=(6*16);}
|
const defaultTitle="DV8 Game Expo <span>2023</span>";let navSpacing=(3*16);let prevElement=null;window.onscroll=()=>{scrollFunction();checkSection();};window.onload=()=>{resizeNav();scrollFunction();checkSection();};window.onresize=()=>{resizeNav();checkSection();}
|
||||||
checkSection();}
|
function resizeNav(){if(window.innerWidth>600){navSpacing=(3*16);}else{navSpacing=(6*16);}}
|
||||||
function scrollFunction(){let nav=document.querySelector("nav");let scrollHeight=0;if(document.body.scrollTop>scrollHeight||document.documentElement.scrollTop>scrollHeight){nav.classList.add("scrolled");}else{nav.classList.remove("scrolled");}}
|
function scrollFunction(){let nav=document.querySelector("nav");let scrollHeight=0;if(document.body.scrollTop>scrollHeight||document.documentElement.scrollTop>scrollHeight){nav.classList.add("scrolled");}else{nav.classList.remove("scrolled");}}
|
||||||
function checkSection(){let navTitle=document.querySelector(".title > p");let sections=document.querySelectorAll("section");if((window.pageYOffset+navSpacing)<sections[0].offsetTop){if(prevElement===null)return;navTitle.innerHTML=defaultTitle;navTitle.style.animation="title-change 0.2s ease-in-out";prevElement=null;setTimeout(()=>{navTitle.style.animation="";},200);}
|
function checkSection(){let navTitle=document.querySelector(".title > p");let sections=document.querySelectorAll("section");if((window.pageYOffset+navSpacing)<sections[0].offsetTop){if(prevElement===null)return;navTitle.innerHTML=defaultTitle;navTitle.style.animation="title-change 0.2s ease-in-out";prevElement=null;setTimeout(()=>{navTitle.style.animation="";},200);}
|
||||||
sections.forEach((section)=>{let top=section.offsetTop;let bottom=section.offsetTop+section.offsetHeight;if((window.pageYOffset+navSpacing)>=top&&window.pageYOffset<(bottom-navSpacing)){if(prevElement===section)return;navTitle.innerHTML=section.id.split("_").join(" ");navTitle.style.animation="title-change 0.2s ease-in-out";prevElement=section;setTimeout(()=>{navTitle.style.animation="";},200);}});}
|
sections.forEach((section)=>{let top=section.offsetTop;let bottom=section.offsetTop+section.offsetHeight;if((window.pageYOffset+navSpacing)>=top&&window.pageYOffset<(bottom-navSpacing)){if(prevElement===section)return;navTitle.innerHTML=section.id.split("_").join(" ");navTitle.style.animation="title-change 0.2s ease-in-out";prevElement=section;setTimeout(()=>{navTitle.style.animation="";},200);}});}
|
||||||
|
|
|
@ -7,16 +7,21 @@ window.onscroll = () => {
|
||||||
checkSection();
|
checkSection();
|
||||||
};
|
};
|
||||||
window.onload = () => {
|
window.onload = () => {
|
||||||
scrollFunction()
|
resizeNav();
|
||||||
|
scrollFunction();
|
||||||
|
checkSection();
|
||||||
};
|
};
|
||||||
window.onresize = () => {
|
window.onresize = () => {
|
||||||
|
resizeNav();
|
||||||
|
checkSection();
|
||||||
|
}
|
||||||
|
|
||||||
|
function resizeNav() {
|
||||||
if (window.innerWidth > 600) {
|
if (window.innerWidth > 600) {
|
||||||
navSpacing = (3 * 16);
|
navSpacing = (3 * 16);
|
||||||
} else {
|
} else {
|
||||||
navSpacing = (6 * 16);
|
navSpacing = (6 * 16);
|
||||||
}
|
}
|
||||||
|
|
||||||
checkSection();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function scrollFunction() {
|
function scrollFunction() {
|
||||||
|
|
|
@ -69,7 +69,7 @@ body
|
||||||
content: ''
|
content: ''
|
||||||
position: absolute
|
position: absolute
|
||||||
inset: 0
|
inset: 0
|
||||||
background-image: linear-gradient(to top, RGB($secondary) 3%, transparent)
|
background-image: linear-gradient(to top, RGB($secondary) 3%, RGBA($primary, 0.1))
|
||||||
z-index: +1
|
z-index: +1
|
||||||
|
|
||||||
main
|
main
|
||||||
|
|
|
@ -5,7 +5,7 @@ services:
|
||||||
image: caddy:alpine
|
image: caddy:alpine
|
||||||
restart: unless-stopped
|
restart: unless-stopped
|
||||||
ports:
|
ports:
|
||||||
# - "80:80"
|
- "80:80"
|
||||||
- "443:443"
|
- "443:443"
|
||||||
volumes:
|
volumes:
|
||||||
- ./Caddy/Caddyfile:/etc/caddy/Caddyfile
|
- ./Caddy/Caddyfile:/etc/caddy/Caddyfile
|
||||||
|
|
Loading…
Add table
Reference in a new issue