Add script to position fixed toc above footer is it overlaps

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

@@ -392,6 +392,7 @@ 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( 'wporg-table-of-contents', get_stylesheet_directory_uri() . '/js/table-of-contents.js', array(), filemtime( __DIR__ . '/js/table-of-contents.js' ), true );
 }
 
 /**

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

@@ -0,0 +1,46 @@
+/**
+ * Table of content JS.
+ *
+ * Stops the sticky table of contents on wide screens from overlapping the footer
+ * by positioning it slightly above
+ */
+
+document.body.onload = function () {
+	const toc = document.querySelector( '.table-of-contents' );
+
+	if ( ! toc ) {
+		return;
+	}
+
+	const resetToCPosition = () => {
+		if ( toc.style ) {
+			toc.removeAttribute( 'style' );
+		}
+	};
+
+	const tocBottom = toc.getBoundingClientRect().bottom;
+	const footer = document.querySelector( '.global-footer' );
+	const windowHeight = window.innerHeight;
+
+	const setToCPosition = () => {
+		if ( window.getComputedStyle( toc ).position !== 'fixed' ) {
+			resetToCPosition();
+			return;
+		}
+
+		const footerTop = footer.getBoundingClientRect().top;
+		const exposedFooter = windowHeight - footerTop + 30;
+		// if the bottom of the toc is less than the exposed footer move it to that position
+		if ( windowHeight - tocBottom < exposedFooter ) {
+			toc.style.bottom = exposedFooter + 'px';
+			toc.style.top = 'initial';
+		} else {
+			resetToCPosition();
+		}
+	};
+
+	setToCPosition();
+
+	window.addEventListener( 'scroll', setToCPosition );
+	window.addEventListener( 'resize', 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;