TOC optimizations

js/toc.js

@@ -14,6 +14,8 @@ document.addEventListener('DOMContentLoaded', function () {
     var headingOffset = 88;
     var ticking = false;
 
+    var tocBottomOffset = null;
+
     function isDesktop() {
         return desktopQuery.matches;
     }
@@ -34,6 +36,26 @@ document.addEventListener('DOMContentLoaded', function () {
         });
     }
 
+    function getArticleElement() {
+        return document.querySelector(
+            '.single-post .post-content article, ' +
+            '.single-post .post-content, ' +
+            'article.post, article, ' +
+            '.entry-content'
+        );
+    }
+
+    function getTocBottomOffset() {
+        if (tocBottomOffset !== null) return tocBottomOffset;
+
+        var value = getComputedStyle(document.documentElement)
+            .getPropertyValue('--toc-bottom-offset')
+            .trim();
+
+        tocBottomOffset = parseInt(value, 10) || 12;
+        return tocBottomOffset;
+    }
+
     function syncPosition() {
         if (!isDesktop()) {
             document.documentElement.style.setProperty('--zeitfresser-toc-top', stickyTop + 'px');
@@ -84,23 +106,32 @@ document.addEventListener('DOMContentLoaded', function () {
             return;
         }
 
-        var footer = document.querySelector('footer.site-footer, footer, #colophon');
-        if (!footer) return;
+        var article = getArticleElement();
 
-        var footerRect = footer.getBoundingClientRect();
-        var tocRect = toc.getBoundingClientRect();
-
-        var offset = 40;
-        var triggerOffset = Math.min(200, window.innerHeight * 0.2);
-
-        var overlap = tocRect.bottom - (footerRect.top - triggerOffset);
-
-        if (overlap > -offset) {
-            var strength = 0.85;
-            var correction = Math.max(0, (overlap + offset) * strength);
-            toc.style.transform = 'translateY(-' + correction + 'px)';
-        } else {
+        if (!article) {
             toc.style.transform = '';
+            return;
+        }
+
+        toc.style.transform = '';
+
+        var scrollTop = window.scrollY || window.pageYOffset;
+
+        var articleRect = article.getBoundingClientRect();
+        var articleBottom = articleRect.top + scrollTop + articleRect.height;
+
+        var tocRect = toc.getBoundingClientRect();
+        var tocTop = tocRect.top + scrollTop;
+        var tocHeight = tocRect.height;
+        var tocBottom = tocTop + tocHeight;
+
+        var offset = getTocBottomOffset();
+
+        var maxBottom = articleBottom - offset;
+        var overflow = Math.ceil(tocBottom - maxBottom);
+
+        if (overflow > 0) {
+            toc.style.transform = 'translateY(-' + overflow + 'px)';
         }
     }
 
@@ -120,10 +151,7 @@ document.addEventListener('DOMContentLoaded', function () {
     function updateProgress() {
         if (!progressBar) return;
 
-        var article = document.querySelector(
-            '.single-post .post-content article, ' +
-            '.single-post .post-content, article.post, article'
-        );
+        var article = getArticleElement();
 
         if (!article) {
             progressBar.style.width = '0%';
@@ -139,7 +167,6 @@ document.addEventListener('DOMContentLoaded', function () {
 
     function updateActiveHeading() {
         var headings = getHeadings();
-
         if (!headings.length) return;
 
         var currentId = headings[0].target.id;

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.3
 Tested up to: 6.2
 Requires PHP: 7.0
 License: GNU General Public License v2 or later
@@ -34,6 +34,7 @@ html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:b
 :root{
   --zeitfresser-toc-top-offset: 10px;
   --zeitfresser-toc-width: 230px;
+  --toc-bottom-offset: 10px;
 }
 
 .zeitfresser-floating-toc{
@@ -53,7 +54,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 +65,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{