Add stickyTop prop to PageLayout.Pane

docs/content/PageLayout.mdx

@@ -367,7 +367,12 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
     defaultValue="false"
     description="Whether the pane should stick to the top of the screen while the content scrolls."
   />
-  <PropsTableRow name="stickyTop" type="number" defaultValue="0" description="The height of the sticky top element" />
+  <PropsTableRow
+    name="stickyTop"
+    type="number | string"
+    defaultValue="0"
+    description="Use stickyTop to push the sticky pane down to make room for a sticky header if necessary"
+  />
   <PropsTableRow
     name="padding"
     type={`| 'none'

src/PageLayout/PageLayout.stories.tsx

@@ -716,8 +716,8 @@ CustomStickyHeader.argTypes = {
     defaultValue: true
   },
   stickyTop: {
-    type: 'number',
-    defaultValue: 100
+    type: 'string',
+    defaultValue: '8rem'
   },
   numParagraphsInPane: {
     type: 'number',

src/PageLayout/PageLayout.tsx

@@ -22,7 +22,7 @@ const PageLayoutContext = React.createContext<{
   padding: keyof typeof SPACING_MAP
   rowGap: keyof typeof SPACING_MAP
   columnGap: keyof typeof SPACING_MAP
-  enableStickyPane?: (stickyTopHeight: number) => void
+  enableStickyPane?: (top: number | string) => void
   disableStickyPane?: () => void
   contentTopRef?: (node?: Element | null | undefined) => void
   contentBottomRef?: (node?: Element | null | undefined) => void
@@ -362,7 +362,7 @@ export type PageLayoutPaneProps = {
    */
   dividerWhenNarrow?: 'inherit' | 'none' | 'line' | 'filled'
   sticky?: boolean
-  stickyTop?: number // the height of the sticky top element
+  stickyTop?: string | number
   hidden?: boolean | ResponsiveValue<boolean>
 } & SxProp
 

src/PageLayout/useStickyPaneHeight.ts

@@ -5,14 +5,12 @@ import {useInView} from 'react-intersection-observer'
  * Calculates the height of the sticky pane such that it always
  * fits into the viewport even when the header or footer are visible.
  */
-// TODO: Handle sticky header
 export function useStickyPaneHeight() {
   const rootRef = React.useRef<HTMLDivElement>(null)
 
   // Default the height to the viewport height
   const [height, setHeight] = React.useState('100vh')
-  // stickyTop state
-  const [stickyTopHeight, setStickyTopHeight] = React.useState(0)
+  const [stickyTop, setStickyTop] = React.useState<number | string>(0)
 
   // Create intersection observers to track the top and bottom of the content region
   const [contentTopRef, contentTopInView, contentTopEntry] = useInView()
@@ -46,11 +44,13 @@ export function useStickyPaneHeight() {
       // We need to account for this when calculating the offset.
       const overflowScroll = Math.max(window.scrollY + window.innerHeight - document.body.scrollHeight, 0)
 
-      calculatedHeight = `calc(100vh - ${Math.max(topOffset, stickyTopHeight) + bottomOffset - overflowScroll}px)`
+      const stickyTopWithUnits = typeof stickyTop === 'number' ? `${stickyTop}px` : stickyTop
+
+      calculatedHeight = `calc(100vh - (max(${topOffset}px, ${stickyTopWithUnits}) + ${bottomOffset}px - ${overflowScroll}px))`
     }
 
     setHeight(calculatedHeight)
-  }, [contentTopEntry, contentBottomEntry, stickyTopHeight])
+  }, [contentTopEntry, contentBottomEntry, stickyTop])
 
   // We only want to add scroll and resize listeners if the pane is sticky.
   // Since hooks can't be called conditionally, we need to use state to track
@@ -90,12 +90,14 @@ export function useStickyPaneHeight() {
     }
   }, [isEnabled, contentTopInView, contentBottomInView, calculateHeight])
 
-  const enableStickyPane = (stickyTop: number) => {
+  function enableStickyPane(top: string | number) {
     setIsEnabled(true)
-    setStickyTopHeight(stickyTop)
+    setStickyTop(top)
   }
 
-  const disableStickyPane = () => setIsEnabled(false)
+  function disableStickyPane() {
+    setIsEnabled(false)
+  }
 
   return {
     rootRef,