From 746790a44e4f15770bea6ca88bf4ffa35d5eddfe Mon Sep 17 00:00:00 2001
From: Benjy Cui <benjytrys@gmail.com>
Date: Sun, 30 Oct 2016 15:11:22 +0800
Subject: [PATCH] docs: update Affix demos

---
 components/affix/demo/basic.md     | 15 +++++++++++----
 components/affix/demo/bottom.md    | 24 ------------------------
 components/affix/demo/offset.md    | 24 ------------------------
 components/affix/demo/on-change.md |  7 ++++---
 components/affix/demo/target.md    | 27 +++++++++++++++++++++------
 5 files changed, 36 insertions(+), 61 deletions(-)
 delete mode 100644 components/affix/demo/bottom.md
 delete mode 100644 components/affix/demo/offset.md

diff --git a/components/affix/demo/basic.md b/components/affix/demo/basic.md
index 4dadf3e9ef..59c8605560 100644
--- a/components/affix/demo/basic.md
+++ b/components/affix/demo/basic.md
@@ -17,8 +17,15 @@ The simplest usage.
 import { Affix, Button } from 'antd';
 
 ReactDOM.render(
-  <Affix>
-    <Button type="primary">Affix top</Button>
-  </Affix>
-, mountNode);
+  <div>
+    <Affix>
+      <Button type="primary">Affix top</Button>
+    </Affix>
+    <br />
+    <Affix offsetBottom={0}>
+      <Button type="primary">Affix bottom</Button>
+    </Affix>
+  </div>,
+  mountNode
+);
 ````
diff --git a/components/affix/demo/bottom.md b/components/affix/demo/bottom.md
deleted file mode 100644
index f8faf64264..0000000000
--- a/components/affix/demo/bottom.md
+++ /dev/null
@@ -1,24 +0,0 @@
----
-order: 2
-title:
-  zh-CN: 下方固定
-  en-US: Bottom
----
-
-## zh-CN
-
-固定在屏幕下方。
-
-## en-US
-
-Affix to bottom.
-
-````jsx
-import { Affix, Button } from 'antd';
-
-ReactDOM.render(
-  <Affix offsetBottom={20}>
-    <Button type="primary">20px to affix bottom</Button>
-  </Affix>
-, mountNode);
-````
diff --git a/components/affix/demo/offset.md b/components/affix/demo/offset.md
deleted file mode 100644
index 878bbf110a..0000000000
--- a/components/affix/demo/offset.md
+++ /dev/null
@@ -1,24 +0,0 @@
----
-order: 1
-title:
-  zh-CN: 偏移
-  en-US: Offset
----
-
-## zh-CN
-
-达到一定的偏移量才触发。
-
-## en-US
-
-Affix element according to offset value.
-
-````jsx
-import { Affix, Button } from 'antd';
-
-ReactDOM.render(
-  <Affix offsetTop={75}>
-    <Button type="primary">75px to affix top</Button>
-  </Affix>
-, mountNode);
-````
diff --git a/components/affix/demo/on-change.md b/components/affix/demo/on-change.md
index 9b4d005021..9d9a89c9d4 100644
--- a/components/affix/demo/on-change.md
+++ b/components/affix/demo/on-change.md
@@ -1,5 +1,5 @@
 ---
-order: 3
+order: 1
 title:
   zh-CN: 固定状态改变的回调
   en-US: Callback
@@ -19,6 +19,7 @@ import { Affix, Button } from 'antd';
 ReactDOM.render(
   <Affix offsetTop={120} onChange={affixed => console.log(affixed)}>
     <Button>120px to affix top</Button>
-  </Affix>
-, mountNode);
+  </Affix>,
+  mountNode
+);
 ````
diff --git a/components/affix/demo/target.md b/components/affix/demo/target.md
index f0a6017abd..52bbc6d71d 100644
--- a/components/affix/demo/target.md
+++ b/components/affix/demo/target.md
@@ -1,5 +1,5 @@
 ---
-order: 4
+order: 2
 title:
   zh-CN: 滚动容器
   en-US: Container to scroll.
@@ -11,20 +11,20 @@ title:
 
 ## en-US
 
-Set a `target` for 'Affix', which is listen to scroll event of target element (default is `window`). 
+Set a `target` for 'Affix', which is listen to scroll event of target element (default is `window`).
 
 ````jsx
 import { Affix, Button } from 'antd';
 
 const Demo = () => {
   return (
-    <div style={{ height: 100, overflow: 'hidden' }}>
-      <div style={{ height: '100%', overflowY: 'scroll' }} id="affix-target">
-        <div style={{ height: 300, backgroundImage: 'url(https://zos.alipayobjects.com/rmsportal/RmjwQiJorKyobvI.jpg)' }}>
+    <div className="view-port">
+      <div id="scrollable-container">
+        <div className="background">
           <br />
           <br />
           <br />
-          <Affix target={() => document.getElementById('affix-target')} offsetTop={20}>
+          <Affix target={() => document.getElementById('scrollable-container')} offsetTop={20}>
             <Button type="primary">Fixed at the top of container</Button>
           </Affix>
         </div>
@@ -35,3 +35,18 @@ const Demo = () => {
 
 ReactDOM.render(<Demo />, mountNode);
 ````
+
+<style>
+#components-affix-demo-target .view-port {
+  height: 100px;
+  overflow: hidden;
+}
+#components-affix-demo-target #scrollable-container {
+  height: 100%;
+  overflow-y: scroll;
+}
+#components-affix-demo-target .background {
+  height: 300px;
+  background-image: url('https://zos.alipayobjects.com/rmsportal/RmjwQiJorKyobvI.jpg');
+}
+</style>