From 8cf122fbf6f68c5f1193e0cda5f3f68b02eac5d9 Mon Sep 17 00:00:00 2001 From: Alan Date: Tue, 9 Jul 2024 03:15:54 +0400 Subject: [PATCH] Update some values if browser resized --- js/main.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/js/main.js b/js/main.js index 3b27032..25f6cf0 100644 --- a/js/main.js +++ b/js/main.js @@ -103,11 +103,18 @@ ready(() => { // i.e. if there are three circles, this is 50% as the bar's width // must increase by 50% to get from the first to second circle, etc const increment = 100/(circles.length-1) - const headerYOffset = (window.innerHeight)/10 - parseFloat(getComputedStyle(_("h2")).fontSize) - 5 + + let headerYOffset = (window.innerHeight)/10 - parseFloat(getComputedStyle(_("h2")).fontSize) - 5 // Current scroll position let scrollPos = 0 + // fire when window resized, e.g. when device is turned + window.addEventListener('resize', function(event) { + intro = _('.content').offsetTop; // set top of content + headerYOffset = (window.innerHeight)/10 - parseFloat(getComputedStyle(_("h2")).fontSize) - 5 + }, true); + document.addEventListener('scroll', () => { // Update scroll position on scroll scrollPos = window.scrollY @@ -131,10 +138,6 @@ ready(() => { // run every 150ms, put most things-that-change-with-scrolling here. // more efficient than putting them in the scroll event window.setInterval(function(){ - intro = _('.content').offsetTop; // set top of content - // ^ this is in a loop so that if the screen is turned it - // will update with new values - // if user scrolls below hero, show scroll up button if (scrollPos > intro) { scrollup.classList.add("show")