From 1138f29cefc0a9d3097d88f3a801157d87e90fb2 Mon Sep 17 00:00:00 2001
From: Guo Yunhe <guoyunhe.gyh@alibaba-inc.com>
Date: Wed, 15 Jan 2025 17:58:21 +0800
Subject: [PATCH] docs(Layout): use sticky instead of fixed (#52411)

* docs(Layout): use sticky instead of fixed

* test: update snap

---------

Co-authored-by: thinkasany <480968828@qq.com>
---
 .../layout/__tests__/__snapshots__/demo-extend.test.ts.snap   | 3 +--
 components/layout/__tests__/__snapshots__/demo.test.ts.snap   | 3 +--
 components/layout/demo/fixed-sider.md                         | 2 +-
 components/layout/demo/fixed-sider.tsx                        | 4 ++--
 components/layout/demo/fixed.md                               | 2 +-
 5 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/components/layout/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/layout/__tests__/__snapshots__/demo-extend.test.ts.snap
index f10e333819..539dfd4ca0 100644
--- a/components/layout/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/layout/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1361,7 +1361,7 @@ exports[`renders components/layout/demo/fixed-sider.tsx extend context correctly
 >
   <aside
     class="ant-layout-sider ant-layout-sider-dark"
-    style="overflow: auto; height: 100vh; position: fixed; inset-inline-start: 0; top: 0px; bottom: 0px; flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;"
+    style="overflow: auto; height: 100vh; position: sticky; inset-inline-start: 0; top: 0px; bottom: 0px; flex: 0 0 200px; max-width: 200px; min-width: 200px; width: 200px;"
   >
     <div
       class="ant-layout-sider-children"
@@ -1776,7 +1776,6 @@ exports[`renders components/layout/demo/fixed-sider.tsx extend context correctly
   </aside>
   <div
     class="ant-layout"
-    style="margin-inline-start: 200px;"
   >
     <header
       class="ant-layout-header"
diff --git a/components/layout/__tests__/__snapshots__/demo.test.ts.snap b/components/layout/__tests__/__snapshots__/demo.test.ts.snap
index 51efa5a0a3..f569760de2 100644
--- a/components/layout/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/layout/__tests__/__snapshots__/demo.test.ts.snap
@@ -755,7 +755,7 @@ exports[`renders components/layout/demo/fixed-sider.tsx correctly 1`] = `
 >
   <aside
     class="ant-layout-sider ant-layout-sider-dark"
-    style="overflow:auto;height:100vh;position:fixed;inset-inline-start:0;top:0;bottom:0;scrollbar-width:thin;scrollbar-gutter:stable;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
+    style="overflow:auto;height:100vh;position:sticky;inset-inline-start:0;top:0;bottom:0;scrollbar-width:thin;scrollbar-gutter:stable;flex:0 0 200px;max-width:200px;min-width:200px;width:200px"
   >
     <div
       class="ant-layout-sider-children"
@@ -1026,7 +1026,6 @@ exports[`renders components/layout/demo/fixed-sider.tsx correctly 1`] = `
   </aside>
   <div
     class="ant-layout"
-    style="margin-inline-start:200px"
   >
     <header
       class="ant-layout-header"
diff --git a/components/layout/demo/fixed-sider.md b/components/layout/demo/fixed-sider.md
index f19e70e0d1..25936c5280 100644
--- a/components/layout/demo/fixed-sider.md
+++ b/components/layout/demo/fixed-sider.md
@@ -4,4 +4,4 @@
 
 ## en-US
 
-When dealing with long content, a fixed sider can provide a better user experience.
+When dealing with long content, a sticky sider can provide a better user experience.
diff --git a/components/layout/demo/fixed-sider.tsx b/components/layout/demo/fixed-sider.tsx
index cbb3aa95e8..1f45a7c695 100644
--- a/components/layout/demo/fixed-sider.tsx
+++ b/components/layout/demo/fixed-sider.tsx
@@ -17,7 +17,7 @@ const { Header, Content, Footer, Sider } = Layout;
 const siderStyle: React.CSSProperties = {
   overflow: 'auto',
   height: '100vh',
-  position: 'fixed',
+  position: 'sticky',
   insetInlineStart: 0,
   top: 0,
   bottom: 0,
@@ -51,7 +51,7 @@ const App: React.FC = () => {
         <div className="demo-logo-vertical" />
         <Menu theme="dark" mode="inline" defaultSelectedKeys={['4']} items={items} />
       </Sider>
-      <Layout style={{ marginInlineStart: 200 }}>
+      <Layout>
         <Header style={{ padding: 0, background: colorBgContainer }} />
         <Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
           <div
diff --git a/components/layout/demo/fixed.md b/components/layout/demo/fixed.md
index b68792873d..fe40a1c0ed 100644
--- a/components/layout/demo/fixed.md
+++ b/components/layout/demo/fixed.md
@@ -4,4 +4,4 @@
 
 ## en-US
 
-Fixed Header is generally used to fix the top navigation to facilitate page switching.
+Sticky Header is generally used to fix the top navigation to facilitate page switching.