diff --git a/src/contexts/ScrollHandlerContext.tsx b/src/contexts/ScrollHandlerContext.tsx index ad0b74d..9ddcde2 100644 --- a/src/contexts/ScrollHandlerContext.tsx +++ b/src/contexts/ScrollHandlerContext.tsx @@ -42,12 +42,22 @@ export function ScrollHandlerProvider({ children }: { children: ReactNode }) { const scrollToCategory = useCallback((categoryId: number) => { const categoryRef = categoryRefs.current?.[categoryId]; if (categoryRef) { - categoryRef.scrollIntoView({ + // Get the sticky header height (70px when sticky, 0 when not) + const stickyHeaderHeight = isCategoriesSticky && categoriesContainerRef.current + ? categoriesContainerRef.current.offsetHeight + : 0; + + // Calculate the position of the category element + const elementPosition = categoryRef.getBoundingClientRect().top; + const offsetPosition = elementPosition + window.pageYOffset - stickyHeaderHeight; + + // Scroll to the exact position, accounting for sticky header + window.scrollTo({ + top: offsetPosition, behavior: "smooth", - block: "start", }); } - }, []); + }, [isCategoriesSticky, categoriesContainerRef]); return ( -
{ - e.stopPropagation(); - e.preventDefault; - }} - > -
-
-
-
-
- - ) : ( + return (
{ + e.stopPropagation(); + e.preventDefault; }} > -
+ + + ) : ( +