Updated sticky header logic.

components/common/StickyHeader.js

@@ -1,32 +0,0 @@
-import { useMeasure } from 'react-basics';
-import classNames from 'classnames';
-import useSticky from 'hooks/useSticky';
-
-export default function StickyHeader({
-  className,
-  stickyClassName,
-  stickyStyle,
-  enabled = true,
-  scrollElement,
-  children,
-}) {
-  const { ref: scrollRef, isSticky } = useSticky({ scrollElement });
-  const { ref: measureRef, dimensions } = useMeasure();
-  const active = enabled && isSticky;
-
-  return (
-    <div
-      ref={measureRef}
-      data-sticky={active}
-      style={active ? { height: dimensions.height } : null}
-    >
-      <div
-        ref={scrollRef}
-        className={classNames(className, { [stickyClassName]: active })}
-        style={active ? { ...stickyStyle, width: dimensions.width } : null}
-      >
-        {children}
-      </div>
-    </div>
-  );
-}

components/metrics/WebsiteChart.js

@@ -2,11 +2,11 @@ import { useMemo } from 'react';
 import { useIntl } from 'react-intl';
 import { Button, Icon, Text, Row, Column } from 'react-basics';
 import Link from 'next/link';
+import classNames from 'classnames';
 import PageviewsChart from './PageviewsChart';
 import MetricsBar from './MetricsBar';
 import WebsiteHeader from './WebsiteHeader';
 import DateFilter from 'components/input/DateFilter';
-import StickyHeader from 'components/common/StickyHeader';
 import ErrorMessage from 'components/common/ErrorMessage';
 import FilterTags from 'components/metrics/FilterTags';
 import RefreshButton from 'components/input/RefreshButton';
@@ -16,9 +16,9 @@ import useTimezone from 'hooks/useTimezone';
 import usePageQuery from 'hooks/usePageQuery';
 import { getDateArray, getDateLength } from 'lib/date';
 import Icons from 'components/icons';
-import { UI_LAYOUT_BODY } from 'lib/constants';
 import { labels } from 'components/messages';
 import styles from './WebsiteChart.module.css';
+import useSticky from '../../hooks/useSticky';
 
 export default function WebsiteChart({
   websiteId,
@@ -37,6 +37,7 @@ export default function WebsiteChart({
     query: { url, referrer, os, browser, device, country },
   } = usePageQuery();
   const { get, useQuery } = useApi();
+  const { ref, isSticky } = useSticky({ enabled: stickyHeader });
 
   const { data, isLoading, error } = useQuery(
     ['websites:pageviews', websiteId, modified, url, referrer, os, browser, device, country],
@@ -81,21 +82,21 @@ export default function WebsiteChart({
         )}
       </WebsiteHeader>
       <FilterTags websiteId={websiteId} params={{ url, referrer, os, browser, device, country }} />
-      <StickyHeader
-        stickyClassName={styles.sticky}
-        enabled={stickyHeader}
-        scrollElement={document.getElementById(UI_LAYOUT_BODY)}
+      <Row
+        ref={ref}
+        className={classNames(styles.header, {
+          [styles.sticky]: stickyHeader,
+          [styles.isSticky]: isSticky,
+        })}
       >
-        <Row className={styles.header}>
-          <Column>
-            <MetricsBar websiteId={websiteId} />
-          </Column>
-          <Column className={styles.actions}>
-            <RefreshButton websiteId={websiteId} isLoading={isLoading} />
-            <DateFilter websiteId={websiteId} value={value} className={styles.dropdown} />
-          </Column>
-        </Row>
-      </StickyHeader>
+        <Column>
+          <MetricsBar websiteId={websiteId} />
+        </Column>
+        <Column className={styles.actions}>
+          <RefreshButton websiteId={websiteId} isLoading={isLoading} />
+          <DateFilter websiteId={websiteId} value={value} className={styles.dropdown} />
+        </Column>
+      </Row>
       <Row>
         <Column className={styles.chart}>
           {error && <ErrorMessage />}

components/metrics/WebsiteChart.module.css

@@ -17,22 +17,23 @@
 }
 
 .header {
-  position: relative;
   display: flex;
   justify-content: space-between;
   align-items: center;
+  padding: 10px 0;
   min-height: 90px;
   margin-bottom: 20px;
+  background: var(--base50);
 }
 
 .sticky {
-  position: fixed;
-  top: 0;
-  background: var(--base50);
+  position: sticky;
+  top: -1px;
+  z-index: 2;
+}
+
+.isSticky {
   border-bottom: 1px solid var(--base300);
-  z-index: 3;
-  width: inherit;
-  padding-top: 10px;
 }
 
 .actions {

components/pages/realtime/RealtimeDashboard.js

@@ -6,7 +6,6 @@ import firstBy from 'thenby';
 import { GridRow, GridColumn } from 'components/layout/Grid';
 import Page from 'components/layout/Page';
 import RealtimeChart from 'components/metrics/RealtimeChart';
-import StickyHeader from 'components/common/StickyHeader';
 import PageHeader from 'components/layout/PageHeader';
 import WorldMap from 'components/common/WorldMap';
 import RealtimeLog from 'components/pages/realtime/RealtimeLog';
@@ -104,9 +103,7 @@ export default function RealtimeDashboard({ websiteId }) {
       <PageHeader title={formatMessage(labels.realtime)}>
         <WebsiteSelect websiteId={websiteId} onSelect={handleSelect} />
       </PageHeader>
-      <StickyHeader stickyClassName={styles.sticky}>
-        <RealtimeHeader websiteId={websiteId} data={currentData} />
-      </StickyHeader>
+      <RealtimeHeader websiteId={websiteId} data={currentData} />
       <div className={styles.chart}>
         <RealtimeChart data={realtimeData} unit="minute" records={REALTIME_RANGE} />
       </div>

hooks/useSticky.js

@@ -1,25 +1,23 @@
 import { useState, useEffect, useRef } from 'react';
 
-export default function useSticky({ scrollElement = document, defaultSticky = false }) {
+export default function useSticky({ defaultSticky = false, enabled = true }) {
   const [isSticky, setIsSticky] = useState(defaultSticky);
   const ref = useRef(null);
-  const initialTop = useRef(null);
 
   useEffect(() => {
-    const handleScroll = () => {
-      setIsSticky((scrollElement?.scrollTop ?? window.scrollY) > initialTop.current);
-    };
+    let observer;
+    const handler = ([entry]) => setIsSticky(entry.intersectionRatio < 1);
 
-    if (initialTop.current === null) {
-      initialTop.current = ref?.current?.offsetTop;
+    if (enabled && ref.current) {
+      observer = new IntersectionObserver(handler, { threshold: [1] });
+      observer.observe(ref.current);
     }
-
-    scrollElement.addEventListener('scroll', handleScroll, true);
-
     return () => {
-      scrollElement.removeEventListener('scroll', handleScroll, true);
+      if (observer) {
+        observer.disconnect();
+      }
     };
-  }, [ref, setIsSticky, scrollElement]);
+  }, [ref]);
 
   return { ref, isSticky };
 }

package.json

@@ -94,7 +94,7 @@
     "node-fetch": "^3.2.8",
     "npm-run-all": "^4.1.5",
     "react": "^18.2.0",
-    "react-basics": "^0.73.0",
+    "react-basics": "^0.74.0",
     "react-beautiful-dnd": "^13.1.0",
     "react-dom": "^18.2.0",
     "react-intl": "^5.24.7",

yarn.lock

@@ -7076,10 +7076,10 @@ rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-basics@^0.73.0:
-  version "0.73.0"
-  resolved "https://registry.yarnpkg.com/react-basics/-/react-basics-0.73.0.tgz#9555563f3407ac417dc833dfca47588123d55535"
-  integrity sha512-eEK8yWWrXO7JATBlPKBfFQlD1hNZoNeEtlYNx+QjOCLKu1qjClutP5nXWHmX4gHE97XFwUKzbTU35NkNEy5C0w==
+react-basics@^0.74.0:
+  version "0.74.0"
+  resolved "https://registry.yarnpkg.com/react-basics/-/react-basics-0.74.0.tgz#153433bc485d6b71d8edf377d1a83f1d55133e24"
+  integrity sha512-Z9XwgEOSRvcPqFqFZL6HR59t/XrqhIB8uoYwbmon3IFX2W0kOPqkX1Box0c+2BibJoHp4N4mbfuZWK2kSEnq9g==
   dependencies:
     classnames "^2.3.1"
     date-fns "^2.29.3"