zent/src/affix/demos/container.md

一套前端设计语言和基于React的实现

---
order: 5
zh-CN:
	title: 自定义相对定位节点
	content: 相对目标节点定位的固钉
en-US:
	title:  Container node for positioning
	content: Affix relative to container node
---

```jsx
import { Affix, Button, WindowScrollHandler } from 'zent';

class Demo extends Component {
	containerRef = null;
	affixRef = React.createRef();

	onSrcoll = () => {
		this.affixRef?.current?.updatePosition();
	};

	render() {
		return (
			<>
				<div
					className="affix-target__container"
					ref={ref => (this.containerRef = ref)}
				>
					<div className="affix-target__content">
						<Affix
							ref={this.affixRef}
							offsetBottom={20}
							offsetTop={20}
							getAffixContainer={() => this.containerRef}
						>
							<Button>{i18n.content}</Button>
						</Affix>
					</div>
				</div>
				<WindowScrollHandler onScroll={this.onSrcoll} />
			</>
		);
	}
}

ReactDOM.render(<Demo />, mountNode);
```

<style>
    .affix-target__container{
        height: 150px;
        overflow-y: auto;
    }

    .affix-target__content {
        background: rgba(0, 0, 0, 0.1);
        padding-top: 150px;
        height: 200px;
    }
</style>