diff --git a/packages/docusaurus-theme-classic/src/theme/DocRoot/Layout/Sidebar/ExpandButton/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocRoot/Layout/Sidebar/ExpandButton/styles.module.css
index ee835664bb46..f5e58785e148 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocRoot/Layout/Sidebar/ExpandButton/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/DocRoot/Layout/Sidebar/ExpandButton/styles.module.css
@@ -7,10 +7,11 @@
 
 @media (min-width: 997px) {
   .expandButton {
-    position: sticky;
+    position: absolute;
     top: 0;
+    right: 0;
+    width: 100%;
     height: 100%;
-    max-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/packages/docusaurus-theme-classic/src/theme/DocRoot/Layout/Sidebar/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocRoot/Layout/Sidebar/index.tsx
index 243511230c0d..573235f42e1e 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocRoot/Layout/Sidebar/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocRoot/Layout/Sidebar/index.tsx
@@ -60,15 +60,20 @@ export default function DocRootLayoutSidebar({
         }
       }}>
       <ResetOnSidebarChange>
-        <DocSidebar
-          sidebar={sidebar}
-          path={pathname}
-          onCollapse={toggleSidebar}
-          isHidden={hiddenSidebar}
-        />
+        <div
+          className={clsx(
+            styles.sidebarViewport,
+            hiddenSidebar && styles.sidebarViewportHidden,
+          )}>
+          <DocSidebar
+            sidebar={sidebar}
+            path={pathname}
+            onCollapse={toggleSidebar}
+            isHidden={hiddenSidebar}
+          />
+          {hiddenSidebar && <ExpandButton toggleSidebar={toggleSidebar} />}
+        </div>
       </ResetOnSidebarChange>
-
-      {hiddenSidebar && <ExpandButton toggleSidebar={toggleSidebar} />}
     </aside>
   );
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/DocRoot/Layout/Sidebar/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocRoot/Layout/Sidebar/styles.module.css
index 52a371cc3fb2..f821f3b60564 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocRoot/Layout/Sidebar/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/DocRoot/Layout/Sidebar/styles.module.css
@@ -29,4 +29,11 @@
     width: var(--doc-sidebar-hidden-width);
     cursor: pointer;
   }
+
+  .sidebarViewport {
+    top: 0;
+    position: sticky;
+    height: 100%;
+    max-height: 100vh;
+  }
 }
diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebar/Desktop/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocSidebar/Desktop/styles.module.css
index 8d7734af15d7..e4d472476a75 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocSidebar/Desktop/styles.module.css
+++ b/packages/docusaurus-theme-classic/src/theme/DocSidebar/Desktop/styles.module.css
@@ -9,13 +9,9 @@
   .sidebar {
     display: flex;
     flex-direction: column;
-    max-height: 100vh;
     height: 100%;
-    position: sticky;
-    top: 0;
     padding-top: var(--ifm-navbar-height);
     width: var(--doc-sidebar-width);
-    transition: opacity 50ms ease;
   }
 
   .sidebarWithHideableNavbar {
@@ -24,8 +20,6 @@
 
   .sidebarHidden {
     opacity: 0;
-    height: 0;
-    overflow: hidden;
     visibility: hidden;
   }