docs: update Affix demos

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
+);
 ````

components/affix/demo/bottom.md

@@ -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);
-````

components/affix/demo/offset.md

@@ -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);
-````

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
+);
 ````

components/affix/demo/target.md

@@ -1,5 +1,5 @@
 ---
-order: 4
+order: 2
 title:
   zh-CN: 滚动容器
   en-US: Container to scroll.
@@ -18,13 +18,13 @@ 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>