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}