fix: mobile toc issue with custom banners

.changeset/weak-spiders-itch.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight': patch
+---
+
+Fixes and issue where the Table of Contents is unable to find any current heading when the page has a banner with custom styling regarding its height.

docs/src/content/docs/getting-started.mdx

@@ -1,6 +1,16 @@
 ---
 title: Getting Started
 description: Learn how to start building your next documentation site with Starlight by Astro.
+banner:
+  content: 'TODO(trueberryless): Remove'
+head:
+  - tag: style
+    content: |
+      :root .sl-banner {
+        background-color: red;
+        color: white;
+        padding-block: 2rem;
+      }
 ---
 
 import { Tabs, TabItem } from '@astrojs/starlight/components';

packages/starlight/components/TableOfContents/starlight-toc.ts

@@ -60,16 +60,40 @@ export class StarlightTOC extends HTMLElement {
 
 		/** Handle intersections and set the current link to the heading for the current intersection. */
 		const setCurrent: IntersectionObserverCallback = (entries) => {
+			let found = false;
+
 			for (const { isIntersecting, target } of entries) {
 				if (!isIntersecting) continue;
 				const heading = getElementHeading(target);
 				if (!heading) continue;
 				const link = links.find((link) => link.hash === '#' + encodeURIComponent(heading.id));
 				if (link) {
 					this.current = link;
+					found = true;
 					break;
 				}
 			}
+
+			// Fallback: if no heading intersects (because the banner is higher and moves the content down too much),
+			// create a temporal IntersectionObserver without rootMargin that finds the nearest heading.
+			// See https://github.com/withastro/starlight/issues/3047
+			if (!found) {
+				const tempObserver = new IntersectionObserver((tempEntries) => {
+					for (const { isIntersecting, target } of tempEntries) {
+						if (!isIntersecting) continue;
+						const heading = getElementHeading(target);
+						if (!heading) continue;
+						const link = links.find((link) => link.hash === '#' + encodeURIComponent(heading.id));
+						if (link) {
+							this.current = link;
+							break;
+						}
+					}
+					tempObserver.disconnect();
+				});
+
+				document.querySelectorAll('main [id]').forEach((el) => tempObserver.observe(el));
+			}
 		};
 
 		// Observe elements with an `id` (most likely headings) and their siblings.