diff --git a/packages/docusaurus-plugin-content-docs/src/theme/DocItem/index.js b/packages/docusaurus-plugin-content-docs/src/theme/DocItem/index.js
index fe0800bb3b..9632207ee5 100644
--- a/packages/docusaurus-plugin-content-docs/src/theme/DocItem/index.js
+++ b/packages/docusaurus-plugin-content-docs/src/theme/DocItem/index.js
@@ -8,7 +8,6 @@
 import React from 'react';
 
 import Head from '@docusaurus/Head';
-
 import DocPaginator from '@theme/DocPaginator';
 
 import styles from './styles.module.css';
@@ -53,7 +52,11 @@ function DocItem(props) {
             <DocPaginator docsMetadata={docsMetadata} metadata={metadata} />
           </div>
           <div className="col col--3 col--offset-1">
-            {DocContent.rightToc && <Headings headings={DocContent.rightToc} />}
+            {DocContent.rightToc && (
+              <div className={styles.tableOfContents}>
+                <Headings headings={DocContent.rightToc} />
+              </div>
+            )}
           </div>
         </div>
       </div>
diff --git a/packages/docusaurus-plugin-content-docs/src/theme/DocItem/styles.module.css b/packages/docusaurus-plugin-content-docs/src/theme/DocItem/styles.module.css
index 12aaa485d3..8471d19777 100644
--- a/packages/docusaurus-plugin-content-docs/src/theme/DocItem/styles.module.css
+++ b/packages/docusaurus-plugin-content-docs/src/theme/DocItem/styles.module.css
@@ -8,3 +8,12 @@
 .docBody {
   min-height: calc(100vh - 50px);
 }
+
+@media only screen and (min-width: 996px) {
+  .tableOfContents {
+    max-height: calc(100vh - (var(--ifm-navbar-height) + 2rem));
+    overflow-y: auto;
+    position: sticky;
+    top: calc(var(--ifm-navbar-height) + 2rem);
+  }
+}