TOC Optimizations

js/toc.js

@@ -87,20 +87,25 @@ document.addEventListener('DOMContentLoaded', function () {
         var footer = document.querySelector('footer.site-footer, footer, #colophon');
         if (!footer) return;
 
-        var footerRect = footer.getBoundingClientRect();
+        toc.style.transform = '';
+
+        var scrollTop = window.scrollY || window.pageYOffset;
+
+        var footerTop = footer.getBoundingClientRect().top + scrollTop;
+
         var tocRect = toc.getBoundingClientRect();
+        var tocTop = tocRect.top + scrollTop;
+        var tocHeight = tocRect.height;
+        var tocBottom = tocTop + tocHeight;
 
-        var offset = 40;
+        var offset = 130;
-        var triggerOffset = Math.min(200, window.innerHeight * 0.2);
 
-        var overlap = tocRect.bottom - (footerRect.top - triggerOffset);
+        var maxBottom = footerTop - offset;
 
-        if (overlap > -offset) {
+        var overflow = tocBottom - maxBottom;
-            var strength = 0.85;
+
-            var correction = Math.max(0, (overlap + offset) * strength);
+        if (overflow > 0) {
-            toc.style.transform = 'translateY(-' + correction + 'px)';
+            toc.style.transform = 'translateY(-' + overflow + 'px)';
-        } else {
-            toc.style.transform = '';
         }
     }
 

style.css

@@ -5,7 +5,7 @@ Author: Zeitfresser
 Author URI: https://ztfr.eu/
 Theme URI: https://ztfr.eu/
 Description: Zeitfresser Wordpress Theme
-Version: 1.1
+Version: 1.2
 Tested up to: 6.2
 Requires PHP: 7.0
 License: GNU General Public License v2 or later
@@ -53,7 +53,7 @@ html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:b
   backdrop-filter:none !important;
   box-shadow:none !important;
 
-  overflow:hidden !important;
+  overflow:visible !important;
 
   transform:none;
   pointer-events:auto !important;
@@ -64,7 +64,7 @@ html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:b
   opacity: 0;
   transition: opacity 0.12s ease-out;
 
-  will-change: opacity, transform;
+  will-change: transform, opacity;
 }
 
 .zeitfresser-floating-toc.is-visible{