diff --git a/docs/nextra-theme-docs/sidebar.js b/docs/nextra-theme-docs/sidebar.js
index 03b5f73ba95f0..4e0d09f194bb3 100644
--- a/docs/nextra-theme-docs/sidebar.js
+++ b/docs/nextra-theme-docs/sidebar.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo } from "react";
+import React, { useState, useEffect, useMemo, useCallback } from "react";
 import cn from "classnames";
 import Slugger from "github-slugger";
 import { useRouter } from "next/router";
@@ -157,6 +157,23 @@ export default function Sidebar({
         .map((child) => child.props.children),
     [headings]
   );
+  const [hasScrolled, setHasScrolled] = useState(false);
+
+  const onScroll = useCallback(() => {
+    setHasScrolled(window.pageYOffset > 1);
+  }, []);
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      requestIdleCallback(onScroll);
+      window.addEventListener("scroll", onScroll);
+    }
+    return () => {
+      if (typeof window !== "undefined") {
+        window.removeEventListener("scroll", onScroll);
+      }
+    };
+  }, [onScroll]);
 
   const { menu } = useMenuContext();
   useEffect(() => {
@@ -175,8 +192,8 @@ export default function Sidebar({
         mdShow ? "md:block" : ""
       )}
       style={{
-        top: "4rem",
-        height: "calc(100vh - 4rem)",
+        top: hasScrolled ? "4rem" : "6rem",
+        height: hasScrolled ? "calc(100vh - 4rem)" : "calc(100vh - 6rem)",
       }}
     >
       <div className="w-full h-full p-4 pb-40 overflow-y-auto border-gray-200 sidebar dark:border-gray-900 md:pb-16">
diff --git a/docs/pages/_app.js b/docs/pages/_app.js
index 11e3ee47f77a9..d08aae78f349f 100644
--- a/docs/pages/_app.js
+++ b/docs/pages/_app.js
@@ -6,6 +6,12 @@ import Prism from "prism-react-renderer/prism";
 (typeof global !== "undefined" ? global : window).Prism = Prism;
 require("prismjs/components/prism-docker");
 
+// Shim requestIdleCallback in Safari
+if (typeof window !== "undefined" && !("requestIdleCallback" in window)) {
+  window.requestIdleCallback = (fn) => setTimeout(fn, 1);
+  window.cancelIdleCallback = (e) => clearTimeout(e);
+}
+
 export default function Nextra({ Component, pageProps }) {
   return (
     <>