From eb4f468b49e37d64b79199c4854f1b234495d2ae Mon Sep 17 00:00:00 2001
From: sorrycc <sorrycc@gmail.com>
Date: Mon, 3 Aug 2015 16:49:42 +0800
Subject: [PATCH] add Affix

---
 components/affix/demo/basic.md  | 17 +++++++++
 components/affix/demo/offset.md | 17 +++++++++
 components/affix/index.jsx      | 62 +++++++++++++++++++++++++++++++++
 components/affix/index.md       |  7 ++++
 index.js                        |  1 +
 package.json                    |  3 +-
 6 files changed, 106 insertions(+), 1 deletion(-)
 create mode 100644 components/affix/demo/basic.md
 create mode 100644 components/affix/demo/offset.md
 create mode 100644 components/affix/index.jsx

diff --git a/components/affix/demo/basic.md b/components/affix/demo/basic.md
new file mode 100644
index 0000000000..64a022c08f
--- /dev/null
+++ b/components/affix/demo/basic.md
@@ -0,0 +1,17 @@
+# 基本
+
+- order: 0
+
+最简单的用法。
+
+---
+
+````jsx
+var Affix = antd.Affix;
+
+React.render(
+  <Affix>
+    <button className="ant-btn ant-btn-primary">offset=0</button>
+  </Affix>
+, document.getElementById('components-affix-demo-basic'));
+````
diff --git a/components/affix/demo/offset.md b/components/affix/demo/offset.md
new file mode 100644
index 0000000000..41cfed3d6d
--- /dev/null
+++ b/components/affix/demo/offset.md
@@ -0,0 +1,17 @@
+# 偏移
+
+- order: 1
+
+达到一定的偏移量才触发。
+
+---
+
+````jsx
+var Affix = antd.Affix;
+
+React.render(
+  <Affix offset="200">
+    <button className="ant-btn ant-btn-primary">offset=200</button>
+  </Affix>
+, document.getElementById('components-affix-demo-offset'));
+````
diff --git a/components/affix/index.jsx b/components/affix/index.jsx
new file mode 100644
index 0000000000..506bdbf68e
--- /dev/null
+++ b/components/affix/index.jsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import joinClasses from 'react/lib/joinClasses';
+import rcUtil from 'rc-util';
+
+var Affix = React.createClass({
+
+  getDefaultProps() {
+    return {
+      offset: 0
+    };
+  },
+
+  getInitialState() {
+    return {
+      affix: false
+    };
+  },
+
+  handleScroll() {
+    var affix = this.state.affix;
+    var offset = this.props.offset;
+    var scrollTop = (document.documentElement && document.documentElement.scrollTop) ||
+    document.body.scrollTop;
+
+    if (!affix && scrollTop >= offset) {
+      this.setState({
+        affix: true
+      });
+    }
+
+    if (affix && scrollTop < offset) {
+      this.setState({
+        affix: false
+      });
+    }
+  },
+
+  componentDidMount() {
+    this.scrollEvent = rcUtil.Dom.addEventListener(window, 'scroll', this.handleScroll);
+  },
+
+  componentWillUnmount() {
+    if (this.scrollEvent) {
+      this.scrollEvent.remove();
+    }
+  },
+
+  render() {
+    var affix = this.state.affix ? 'affix' : '';
+    var className = this.props.className;
+
+    return (
+      <div {...this.props} className={joinClasses(className, affix)}>
+        {this.props.children}
+      </div>
+    );
+  }
+
+});
+
+module.exports = Affix;
+
diff --git a/components/affix/index.md b/components/affix/index.md
index 1adff41513..f9c572c7b2 100644
--- a/components/affix/index.md
+++ b/components/affix/index.md
@@ -5,3 +5,10 @@
 
 ---
 
+## API
+
+属性如下
+
+| 成员        | 说明           | 类型               | 默认值       |
+|-------------|----------------|--------------------|--------------|
+| offset     | 达到指定偏移量后触发   | Number | 0        |
diff --git a/index.js b/index.js
index 40875afcd7..5fb9d84bf1 100644
--- a/index.js
+++ b/index.js
@@ -1,6 +1,7 @@
 require('./style/index.less');
 
 var antd = {
+  Affix: require('./components/affix'),
   Datepicker: require('./components/datepicker'),
   Tooltip: require('./components/tooltip'),
   Tabs: require('./components/tabs'),
diff --git a/package.json b/package.json
index df6729320b..f2e5ac8a31 100644
--- a/package.json
+++ b/package.json
@@ -56,7 +56,8 @@
     "rc-table": "~3.1.0",
     "rc-tabs": "~5.2.0",
     "rc-tooltip": "~2.4.0",
-    "rc-tree": "~0.10.0"
+    "rc-tree": "~0.10.0",
+    "rc-util": "~2.0.3"
   },
   "devDependencies": {
     "autoprefixer-loader": "~2.0.0",