diff --git a/packages/website/src/components/Layout/Layout.js b/packages/website/src/components/Layout/Layout.js index 851310c2..307c0369 100644 --- a/packages/website/src/components/Layout/Layout.js +++ b/packages/website/src/components/Layout/Layout.js @@ -20,7 +20,7 @@ const FixedHeader = () => { const [mode, setMode] = React.useState(); React.useLayoutEffect(() => { - const offset = ref.current.offsetHeight; + const offset = ref.current.offsetHeight + 1; const element = document.elementFromPoint(0, offset); const backgroundColor = window.getComputedStyle(element, null).getPropertyValue("background-color"); const color = readableColor(backgroundColor); // returns either #fff or #000 @@ -34,7 +34,7 @@ const FixedHeader = () => { return (
- +
); }; diff --git a/packages/website/src/components/Navigation/Navigation.js b/packages/website/src/components/Navigation/Navigation.js index 542274b1..802071e9 100644 --- a/packages/website/src/components/Navigation/Navigation.js +++ b/packages/website/src/components/Navigation/Navigation.js @@ -16,11 +16,17 @@ const routes = [ { title: "News", to: "/news" }, ]; -const Navigation = ({ mode, yyy = 0 }) => { +const useWindowTop = () => { + const { y } = useWindowScroll(); + + return y <= 0; +}; + +const Navigation = ({ mode }) => { const navRef = React.useRef(null); const [open, setOpen] = React.useState(false); const windowSize = useWindowSize(); - const { y: offsetY } = useWindowScroll(); + const isWindowTop = useWindowTop(); React.useEffect(() => { setOpen(false); @@ -41,7 +47,7 @@ const Navigation = ({ mode, yyy = 0 }) => { className={classnames("relative px-8 py-6 transition-all duration-500", { "bg-white border-b border-palette-200": mode === "light", "bg-palette-600 bg-opacity-50": mode === "dark", - "desktop:py-12": offsetY <= 0, + "desktop:py-12": isWindowTop, })} ref={navRef} > @@ -51,7 +57,7 @@ const Navigation = ({ mode, yyy = 0 }) => { {mode === "dark" && } {mode === "light" && } - {yyy} {offsetY} {mode} + {isWindowTop} {mode}