Add script to position fixed toc above footer is it overlaps

source/wp-content/themes/wporg-developer/functions.php

@@ -392,6 +392,8 @@ function theme_scripts_styles() {
 	wp_enqueue_script( 'wporg-developer-navigation', get_stylesheet_directory_uri() . '/js/navigation.js', array(), filemtime( __DIR__ . '/js/navigation.js' ), true );
 	wp_enqueue_script( 'wporg-developer-chapters', get_stylesheet_directory_uri() . '/js/chapters.js', array( 'jquery' ), filemtime( __DIR__ . '/js/chapters.js' ) );
 	wp_enqueue_script( 'wporg-developer-menu', get_stylesheet_directory_uri() . '/js/menu.js', array( 'jquery' ), filemtime( __DIR__ . '/js/menu.js' ), true );
+	wp_enqueue_script( 'raf-throttle', get_stylesheet_directory_uri() . '/js/rafThrottle.min.js', array(), filemtime( __DIR__ . '/js/rafThrottle.min.js' ), true );
+	wp_enqueue_script( 'wporg-table-of-contents', get_stylesheet_directory_uri() . '/js/table-of-contents.js', array('raf-throttle'), filemtime( __DIR__ . '/js/table-of-contents.js' ), true );
 }
 
 /**

source/wp-content/themes/wporg-developer/js/table-of-contents.js

@@ -0,0 +1,57 @@
+/**
+ * Table of contents JS.
+ *
+ * Stops the sticky table of contents on wide screens from overlapping the footer
+ * by positioning it slightly above
+ * Uses global rafThrottle.min.js - https://github.com/wuct/raf-throttle
+ */
+
+document.body.onload = () => {
+	const toc = document.querySelector( '.table-of-contents' );
+
+	if ( ! toc ) {
+		return;
+	}
+
+	const footer = document.querySelector( '.global-footer' );
+	const tocTop = parseInt( window.getComputedStyle( toc ).top, 10 );
+	let windowHeight = window.innerHeight;
+
+	const resetToCPosition = () => {
+		if ( toc.style ) {
+			toc.removeAttribute( 'style' );
+		}
+	};
+
+	const setToCPosition = () => {
+		if ( window.getComputedStyle( toc ).position !== 'fixed' ) {
+			resetToCPosition();
+			return;
+		}
+
+		const tocHeight = toc.offsetHeight;
+		const tocBottom = tocTop + tocHeight;
+		const footerTopWithClearSpace = parseInt( footer.getBoundingClientRect().top, 10 ) - 30;
+
+		// if the bottom of the toc is below the top of the footer's clear space move it above
+		if ( tocBottom > footerTopWithClearSpace ) {
+			toc.style.bottom = windowHeight - footerTopWithClearSpace + 'px';
+			toc.style.top = 'initial';
+		} else {
+			resetToCPosition();
+		}
+	};
+
+	setToCPosition();
+
+	// eslint-disable-next-line no-undef
+	window.addEventListener( 'scroll', rafThrottle( setToCPosition ) );
+	window.addEventListener(
+		'resize',
+		// eslint-disable-next-line no-undef
+		rafThrottle( () => {
+			windowHeight = window.innerHeight;
+			setToCPosition();
+		} )
+	);
+};

source/wp-content/themes/wporg-developer/scss/main.scss

@@ -2460,6 +2460,7 @@ body.responsive-show {
 	.site-main .table-of-contents {
 		position: fixed;
 		width: 15vw;
+		margin-bottom: 0;
 
 		.code-reference & {
 			margin-left: 0;