support affix bottom, close #1000

components/affix/demo/bottom.md

@@ -0,0 +1,17 @@
+# 下方固定
+
+- order: 2
+
+固定在屏幕下方
+
+---
+
+````jsx
+import { Affix, Button } from 'antd';
+
+ReactDOM.render(
+  <Affix offsetBottom={20}>
+    <Button type="primary">固定在距离底部 20px 的位置</Button>
+  </Affix>
+, mountNode);
+````

components/affix/demo/offset.md

@@ -10,7 +10,7 @@
 import { Affix, Button } from 'antd';
 
 ReactDOM.render(
-  <Affix offset={75}>
+  <Affix offsetTop={75}>
     <Button type="primary">固定在距离顶部 75px 的位置</Button>
   </Affix>
 , mountNode);

components/affix/index.jsx

@@ -33,43 +33,60 @@ function getOffset(element) {
 }
 
 const Affix = React.createClass({
-
-  getDefaultProps() {
-    return {
-      offset: 0,
-    };
-  },
-
   propTypes: {
-    offset: React.PropTypes.number,
+    offsetTop: React.PropTypes.number,
+    offsetBottom: React.PropTypes.number,
   },
 
   getInitialState() {
     return {
-      affix: false,
       affixStyle: null,
     };
   },
 
   handleScroll() {
-    const affix = this.state.affix;
+    let { offsetTop, offsetBottom } = this.props;
     const scrollTop = getScroll(window, true);
     const elemOffset = getOffset(ReactDOM.findDOMNode(this));
+    const elemSize = {
+      width: ReactDOM.findDOMNode(this.refs.fixedNode).offsetWidth,
+      height: ReactDOM.findDOMNode(this.refs.fixedNode).offsetHeight,
+    };
 
-    if (!affix && (elemOffset.top - this.props.offset) < scrollTop) {
-      this.setState({
-        affix: true,
-        affixStyle: {
-          top: this.props.offset,
-          left: elemOffset.left,
-          width: ReactDOM.findDOMNode(this).offsetWidth,
-        },
-      });
+    const offsetMode = {};
+    if (typeof offsetTop !== 'number' && typeof offsetBottom !== 'number') {
+      offsetMode.top = true;
+      offsetTop = 0;
+    } else {
+      offsetMode.top = typeof offsetTop === 'number';
+      offsetMode.bottom = typeof offsetBottom === 'number';
     }
 
-    if (affix && (elemOffset.top - this.props.offset) > scrollTop) {
+    if (scrollTop > elemOffset.top - offsetTop && offsetMode.top) {
+      // Fixed Top
+      if (!this.state.affixStyle) {
+        this.setState({
+          affixStyle: {
+            position: 'fixed',
+            top: offsetTop,
+            left: elemOffset.left,
+          },
+        });
+      }
+    } else if (scrollTop < elemOffset.top + elemSize.height + offsetBottom - window.innerHeight &&
+               offsetMode.bottom) {
+      // Fixed Bottom
+      if (!this.state.affixStyle) {
+        this.setState({
+          affixStyle: {
+            position: 'fixed',
+            bottom: offsetBottom,
+            left: elemOffset.left,
+          },
+        });
+      }
+    } else if (this.state.affixStyle) {
       this.setState({
-        affix: false,
         affixStyle: null,
       });
     }
@@ -92,12 +109,12 @@ const Affix = React.createClass({
   render() {
     const className = classNames({
       [this.props.className]: this.props.className,
-      'ant-affix': this.state.affix,
+      'ant-affix': this.state.affixStyle,
     });
 
     return (
       <div {...this.props}>
-        <div className={className} style={this.state.affixStyle}>
+        <div className={className} ref="fixedNode" style={this.state.affixStyle}>
           {this.props.children}
         </div>
       </div>

components/affix/index.md

@@ -18,4 +18,5 @@
 
 | 成员        | 说明           | 类型               | 默认值       |
 |-------------|----------------|--------------------|--------------|
-| offset      | 达到指定偏移量后触发   | Number | 0        |
+| offsetTop    | 距离窗口顶部达到指定偏移量后触发   | Number |         |
+| offsetBottom | 距离窗口底部达到指定偏移量后触发   | Number |         |