diff --git a/components/affix/__tests__/Affix.test.js b/components/affix/__tests__/Affix.test.js
index 2ddf1e5c3d..f2737259ab 100644
--- a/components/affix/__tests__/Affix.test.js
+++ b/components/affix/__tests__/Affix.test.js
@@ -100,4 +100,19 @@ describe('Affix Render', () => {
scrollTo(0);
expect(wrapper.instance().affix.state.affixStyle).not.toBe(null);
});
+
+ it('updatePosition when offsetTop changed', () => {
+ document.body.innerHTML = '
';
+
+ wrapper = mount(, { attachTo: document.getElementById('mounter') });
+ jest.runAllTimers();
+
+ scrollTo(100);
+ expect(wrapper.instance().affix.state.affixStyle.top).toBe(0);
+ wrapper.setProps({
+ offsetTop: 10,
+ });
+ jest.runAllTimers();
+ expect(wrapper.instance().affix.state.affixStyle.top).toBe(10);
+ });
});
diff --git a/components/affix/demo/basic.md b/components/affix/demo/basic.md
index 59c8605560..c1c45ce5fa 100644
--- a/components/affix/demo/basic.md
+++ b/components/affix/demo/basic.md
@@ -16,16 +16,46 @@ The simplest usage.
````jsx
import { Affix, Button } from 'antd';
+class Demo extends React.Component {
+ state = {
+ top: 10,
+ bottom: 10,
+ }
+ render() {
+ return (
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
ReactDOM.render(
-
-
-
-
-
-
-
-
-
,
+ ,
mountNode
);
````
diff --git a/components/affix/index.tsx b/components/affix/index.tsx
index 0882ee3d87..4f102caf56 100644
--- a/components/affix/index.tsx
+++ b/components/affix/index.tsx
@@ -233,6 +233,12 @@ export default class Affix extends React.Component {
// Mock Event object.
this.updatePosition({});
}
+ if (
+ this.props.offsetTop !== nextProps.offsetTop ||
+ this.props.offsetBottom !== nextProps.offsetBottom
+ ) {
+ this.updatePosition({});
+ }
}
componentWillUnmount() {