Fix shitty JS

This commit is contained in:
Michał Gdula 2023-05-17 23:29:42 +01:00
parent f9bd75e58d
commit b12de32a67
2 changed files with 11 additions and 10 deletions

View file

@ -1,3 +1,3 @@
const defaultTitle="DV8 Game Expo <span>2023</span>";let prevTitle;window.onscroll=()=>{scrollFunction();checkSection();};window.onload=()=>{scrollFunction()};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("nav > h1");let sections=document.querySelectorAll("section");if(window.pageYOffset<sections[0].offsetTop){if(prevTitle===defaultTitle)return;navTitle.innerHTML=defaultTitle;navTitle.style.animation="title-change 0.2s ease-in-out";prevTitle=defaultTitle;setTimeout(()=>{navTitle.style.animation="";},200);}
sections.forEach((section)=>{let top=section.offsetTop;let bottom=section.offsetTop+section.offsetHeight;if(window.pageYOffset>=top&&window.pageYOffset<bottom){if(prevTitle===section.id)return;navTitle.innerHTML=section.id;navTitle.style.animation="title-change 0.2s ease-in-out";prevTitle=section.id;setTimeout(()=>{navTitle.style.animation="";},200);}});}
const defaultTitle="DV8 Game Expo <span>2023</span>";const spacing=48;let prevElement=null;window.onscroll=()=>{scrollFunction();checkSection();};window.onload=()=>{scrollFunction()};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("nav > h1");let sections=document.querySelectorAll("section");if((window.pageYOffset+spacing)<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+spacing)>=top&&window.pageYOffset<(bottom-spacing)){if(prevElement===section)return;navTitle.innerHTML=section.id;navTitle.style.animation="title-change 0.2s ease-in-out";prevElement=section;setTimeout(()=>{navTitle.style.animation="";},200);}});}

View file

@ -1,5 +1,6 @@
const defaultTitle = "DV8 Game Expo <span>2023</span>";
let prevTitle;
const spacing = 48; // The amount of pixels to offset the section by
let prevElement = null;
window.onscroll = () => {
scrollFunction();
@ -26,13 +27,13 @@ function checkSection() {
let sections = document.querySelectorAll("section");
// If we're at the top of the page, set the title to the default
if (window.pageYOffset < sections[0].offsetTop) {
if ((window.pageYOffset + spacing) < sections[0].offsetTop) {
// If we're already on the default title, don't do anything as it'll break the animation
if (prevTitle === defaultTitle) return;
if (prevElement === null) return;
navTitle.innerHTML = defaultTitle;
navTitle.style.animation = "title-change 0.2s ease-in-out";
prevTitle = defaultTitle;
prevElement = null;
// Remove the animation after it's done, so we can animate again
setTimeout(() => { navTitle.style.animation = ""; }, 200);
@ -48,13 +49,13 @@ function checkSection() {
// If the section is on the screen is:
// 1. The top of the section is above the top of the screen
// 2. The bottom of the section is below the bottom of the screen
if (window.pageYOffset >= top && window.pageYOffset < bottom) {
if ((window.pageYOffset + spacing) >= top && window.pageYOffset < (bottom - spacing)) {
// If we're already on the section, don't do anything as it'll break the animation
if (prevTitle === section.id) return;
if (prevElement === section) return;
navTitle.innerHTML = section.id;
navTitle.style.animation = "title-change 0.2s ease-in-out";
prevTitle = section.id;
prevElement = section;
// Remove the animation after it's done, so we can animate again
setTimeout(() => { navTitle.style.animation = ""; }, 200);