Minor optimization

Author: alanrme

js/main.js

@@ -103,7 +103,7 @@ 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 headerYTrans = (window.innerHeight)/10 - parseFloat(getComputedStyle(_("h2")).fontSize) - 5
+    const headerYOffset = (window.innerHeight)/10 - parseFloat(getComputedStyle(_("h2")).fontSize) - 5
 
     // Current scroll position
     let scrollPos = 0
@@ -116,10 +116,14 @@ ready(() => {
         sections.forEach((section, i) => {
             const rect = section.getBoundingClientRect()
 
-            // look for header that has already been activated with class sticky
-            header = section.querySelector("h2.stickyheader.sticky")
-            if (header) {
-                header.style.transform = `scale(10) translate(${(rect.top) / (rect.bottom - rect.top)*70}%, ${headerYTrans}px)`
+            // only bother doing these transformations if the section is actually on screen
+            // i.e. the section bottom is lower than the top of the screen
+            if (rect.bottom > 0) {
+                // look for header that has already been activated with class sticky
+                header = section.querySelector("h2.stickyheader.sticky")
+                if (header) {
+                    header.style.transform = `scale(10) translate(${(rect.top) / (rect.bottom - rect.top)*70}%, ${headerYOffset}px)`
+                }
             }
         })
     })