Browse Source
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
main
Alex Visan
2 years ago
committed by
GitHub
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with
2 additions and
2 deletions
-
src/components/Layout/useTocHighlight.tsx
|
|
@ -4,7 +4,7 @@ |
|
|
|
|
|
|
|
|
import {useState, useRef, useEffect} from 'react'; |
|
|
import {useState, useRef, useEffect} from 'react'; |
|
|
|
|
|
|
|
|
const TOP_OFFSET = 75; |
|
|
const TOP_OFFSET = 85; |
|
|
|
|
|
|
|
|
export function getHeaderAnchors(): HTMLAnchorElement[] { |
|
|
export function getHeaderAnchors(): HTMLAnchorElement[] { |
|
|
return Array.prototype.filter.call( |
|
|
return Array.prototype.filter.call( |
|
|
@ -32,7 +32,7 @@ export function useTocHighlight() { |
|
|
const scrollPosition = window.scrollY + window.innerHeight; |
|
|
const scrollPosition = window.scrollY + window.innerHeight; |
|
|
const headersAnchors = getHeaderAnchors(); |
|
|
const headersAnchors = getHeaderAnchors(); |
|
|
|
|
|
|
|
|
if (scrollPosition >= 0 && pageHeight - scrollPosition <= TOP_OFFSET) { |
|
|
if (scrollPosition >= 0 && pageHeight - scrollPosition <= 0) { |
|
|
// Scrolled to bottom of page.
|
|
|
// Scrolled to bottom of page.
|
|
|
setCurrentIndex(headersAnchors.length - 1); |
|
|
setCurrentIndex(headersAnchors.length - 1); |
|
|
return; |
|
|
return; |
|
|
|
