fix toc to highlight the correct header on click (#5765)

* fix toc to highlight the correct header on click

* fix case for when the toc has only a few headings

src/components/Layout/useTocHighlight.tsx

@@ -4,7 +4,7 @@
 
 import {useState, useRef, useEffect} from 'react';
 
-const TOP_OFFSET = 75;
+const TOP_OFFSET = 85;
 
 export function getHeaderAnchors(): HTMLAnchorElement[] {
   return Array.prototype.filter.call(
@@ -32,7 +32,7 @@ export function useTocHighlight() {
       const scrollPosition = window.scrollY + window.innerHeight;
       const headersAnchors = getHeaderAnchors();
 
-      if (scrollPosition >= 0 && pageHeight - scrollPosition <= TOP_OFFSET) {
+      if (scrollPosition >= 0 && pageHeight - scrollPosition <= 0) {
         // Scrolled to bottom of page.
         setCurrentIndex(headersAnchors.length - 1);
         return;