DV8/GameExpo23
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/GameExpo23.git synced 2025-05-22 19:14:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Resize nav on screen size

Browse source
This commit is contained in:
Michał Gdula 2023-05-19 13:32:12 +01:00
parent b12de32a67
commit 85986048da
10 changed files with 146 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

37
DV8-Expo/website/static/js/nav.js
View file

@ -1,12 +1,23 @@
const defaultTitle = "DV8 Game Expo <span>2023</span>";
const spacing = 48; // The amount of pixels to offset the section by
let navSpacing = (3 * 16); // The amount of pixels to offset the section by
let prevElement = null;
window.onscroll = () => {
scrollFunction();
checkSection();
};
window.onload = () => { scrollFunction() };
window.onload = () => {
scrollFunction()
};
window.onresize = () => {
if (window.innerWidth > 600) {
navSpacing = (3 * 16);
} else {
navSpacing = (6 * 16);
}
checkSection();
}
function scrollFunction() {
let nav = document.querySelector("nav");
@ -23,11 +34,11 @@ function scrollFunction() {
function checkSection() {
// Get the nav and sections
let navTitle = document.querySelector("nav > h1");
let navTitle = document.querySelector(".title > p");
let sections = document.querySelectorAll("section");
// If we're at the top of the page, set the title to the default
if ((window.pageYOffset + spacing) < sections[0].offsetTop) {
if ((window.pageYOffset + navSpacing) < sections[0].offsetTop) {
// If we're already on the default title, don't do anything as it'll break the animation
if (prevElement === null) return;
@ -49,11 +60,11 @@ 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 + spacing) >= top && window.pageYOffset < (bottom - spacing)) {
if ((window.pageYOffset + navSpacing) >= top && window.pageYOffset < (bottom - navSpacing)) {
// If we're already on the section, don't do anything as it'll break the animation
if (prevElement === section) return;
navTitle.innerHTML = section.id;
navTitle.innerHTML = section.id.split("_").join(" ");
navTitle.style.animation = "title-change 0.2s ease-in-out";
prevElement = section;
@ -62,3 +73,17 @@ function checkSection() {
}
});
}
document.querySelectorAll("nav > ul > li > a").forEach((element) => {
element.onclick = () => {
let anchor = location.hash.split("#")[1].toString();
let element = document.getElementById(anchor);
if (element === null) {
window.scrollTo({ top: 0, behavior: "smooth" });
} else {
window.scrollTo({top: (element.offsetTop + navSpacing), behavior: "smooth"});
}
}
});