diff --git a/packages/documentation-framework/hooks/useIsStuck.js b/packages/documentation-framework/hooks/useIsStuck.js
new file mode 100644
index 0000000000..2f19bc364f
--- /dev/null
+++ b/packages/documentation-framework/hooks/useIsStuck.js
@@ -0,0 +1,20 @@
+import { useState, useLayoutEffect } from 'react';
+
+export const useIsStuck = (stickyElementId) => {
+  const [isStuck, setIsStuck] = useState(false);
+
+  useLayoutEffect(() => {
+    const scrollElement = document.getElementById('ws-page-main');
+    const stickyElement = document.getElementById(stickyElementId);
+
+    const syncFromScroll = () => {
+      setIsStuck(scrollElement.scrollTop > stickyElement.getBoundingClientRect().top);
+    };
+
+    syncFromScroll();
+    scrollElement.addEventListener('scroll', syncFromScroll, { passive: true });
+    return () => scrollElement.removeEventListener('scroll', syncFromScroll);
+  }, []);
+
+  return isStuck;
+};
diff --git a/packages/documentation-framework/templates/mdx.js b/packages/documentation-framework/templates/mdx.js
index 005a874090..108691086a 100644
--- a/packages/documentation-framework/templates/mdx.js
+++ b/packages/documentation-framework/templates/mdx.js
@@ -23,6 +23,7 @@ import { capitalize, getTitle, slugger, trackEvent } from '../helpers';
 import './mdx.css';
 import { convertToReactComponent } from '@patternfly/ast-helpers';
 import { FunctionsTable } from '../components/functionsTable/functionsTable';
+import { useIsStuck } from '../hooks/useIsStuck';
 
 const MDXChildTemplate = ({ Component, source, toc = [], index = 0, id }) => {
   const {
@@ -167,6 +168,8 @@ const MDXChildTemplate = ({ Component, source, toc = [], index = 0, id }) => {
 };
 
 export const MDXTemplate = ({ title, sources = [], path, id, componentsData }) => {
+  const isStickyStuck = useIsStuck('ws-sticky-nav-tabs');
+
   const hasFeedbackButton = process.env.hasFeedbackButton;
   const isDeprecated =
     sources.some((source) => source.source === 'react-deprecated' || source.source === 'html-deprecated') &&
@@ -307,8 +310,8 @@ export const MDXTemplate = ({ title, sources = [], path, id, componentsData }) =
           </Content>
         </PageSection>
         {showTabs && (
-          <PageSection id="ws-sticky-nav-tabs" stickyOnBreakpoint={{ default: 'top' }} type="tabs">
-            <div className="pf-v6-c-tabs pf-m-page-insets pf-m-no-border-bottom">
+          <PageSection id="ws-sticky-nav-tabs" stickyBase="top" isStickyStuck={isStickyStuck} type="tabs">
+            <div className="pf-v6-c-tabs pf-m-page-insets">
               <ul className="pf-v6-c-tabs__list">
                 {sourceKeys.map((source, index) => (
                   <li