Merge pull request #264 from ucsc/fix/UCSC-130/anchor-links-scroll-of…

…fset [UCSC-130] Prevent sticky header from covering scroll targets
ucsc · Sep 7, 2023 · edb3046 · edb3046
2 parents 4246f74 + dbbdbfb
commit edb3046
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/src/js/components/main-nav.js b/src/js/components/main-nav.js
@@ -267,7 +267,7 @@ const deactivateMenuItem = ( data ) => {
 
 const handleResize = () => {
 	// Find the site header height.
-	const siteHeader = document.querySelector( '.site-header__header' );
+	const siteHeader = document.querySelector( '.site-header' );
 	document.documentElement.style.setProperty(
 		'--site-header-height',
 		siteHeader.clientHeight + 'px'

diff --git a/src/scss/theme-regions/_site-header.scss b/src/scss/theme-regions/_site-header.scss
@@ -51,6 +51,13 @@
 	}
 }
 
+// Add a top scroll margin to scroll targets in other regions so they're not
+// behind the sticky nav after being scrolled to.
+.content-region *,
+.footer-region * {
+	scroll-margin-top: calc(var(--site-header-height, 0) + 1rem);
+}
+
 ////////////////////////////////////////////////////////////////////////////////
 // Site Header Template
 ////////////////////////////////////////////////////////////////////////////////