mirror of
https://github.com/Fluffy-Bean/GameExpo23.git
synced 2025-05-14 14:22:16 +00:00
Fix shitty JS
This commit is contained in:
parent
f9bd75e58d
commit
b12de32a67
2 changed files with 11 additions and 10 deletions
|
@ -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");}}
|
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<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);}
|
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>=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);}});}
|
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);}});}
|
|
@ -1,5 +1,6 @@
|
||||||
const defaultTitle = "DV8 Game Expo <span>2023</span>";
|
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 = () => {
|
window.onscroll = () => {
|
||||||
scrollFunction();
|
scrollFunction();
|
||||||
|
@ -26,13 +27,13 @@ function checkSection() {
|
||||||
let sections = document.querySelectorAll("section");
|
let sections = document.querySelectorAll("section");
|
||||||
|
|
||||||
// If we're at the top of the page, set the title to the default
|
// 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 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.innerHTML = defaultTitle;
|
||||||
navTitle.style.animation = "title-change 0.2s ease-in-out";
|
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
|
// Remove the animation after it's done, so we can animate again
|
||||||
setTimeout(() => { navTitle.style.animation = ""; }, 200);
|
setTimeout(() => { navTitle.style.animation = ""; }, 200);
|
||||||
|
@ -48,13 +49,13 @@ function checkSection() {
|
||||||
// If the section is on the screen is:
|
// If the section is on the screen is:
|
||||||
// 1. The top of the section is above the top of the screen
|
// 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
|
// 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 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.innerHTML = section.id;
|
||||||
navTitle.style.animation = "title-change 0.2s ease-in-out";
|
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
|
// Remove the animation after it's done, so we can animate again
|
||||||
setTimeout(() => { navTitle.style.animation = ""; }, 200);
|
setTimeout(() => { navTitle.style.animation = ""; }, 200);
|
||||||
|
|
Loading…
Add table
Reference in a new issue