diff --git a/packages/overdrive/lib/components/StickyBox/StickyBox.css.ts b/packages/overdrive/lib/components/StickyBox/StickyBox.css.ts index 4f582f0e9..abe933edd 100644 --- a/packages/overdrive/lib/components/StickyBox/StickyBox.css.ts +++ b/packages/overdrive/lib/components/StickyBox/StickyBox.css.ts @@ -7,6 +7,10 @@ export const root = style({ position: 'sticky', transition: `box-shadow 0.3s ${vars.animation.easing.standard} 0s`, }); +export const simpleRoot = style({ + position: 'sticky', + height: 'fit-content', +}); export const content = style({ height: 'fit-content', diff --git a/packages/overdrive/lib/components/StickyBox/StickyBox.tsx b/packages/overdrive/lib/components/StickyBox/StickyBox.tsx index 5b9679446..335bb2770 100644 --- a/packages/overdrive/lib/components/StickyBox/StickyBox.tsx +++ b/packages/overdrive/lib/components/StickyBox/StickyBox.tsx @@ -10,12 +10,14 @@ interface Props extends ComponentProps { top?: 'none' | '1' | '2' | '3' | '5' | '7' | 'subHeader'; bottom?: 'none' | '1' | '2' | '3' | 'subHeader'; zIndex?: 0 | 1 | 2 | 3 | 99; + noPopShadow?: boolean; className?: string; } export const StickyBox: FunctionComponent = ({ top = 'none', bottom = 'none', + noPopShadow = false, zIndex = 2, className = '', backgroundColour, @@ -38,7 +40,19 @@ export const StickyBox: FunctionComponent = ({ return () => parentElement.removeEventListener('scroll', onScroll); }, [containerRef.current?.parentElement]); - return ( + return noPopShadow ? ( + + {children} + + ) : (