寫的時候參考了非常多網(wǎng)絡(luò)上的代碼诡壁，故發(fā)出來共享，共同進(jìn)步。
變量說明：
- NavBarHeight: 按需填入
- offset: 自行傳入的修正偏移量（比如說娜饵，待固定的元素上方存在 margin-bottom）
- switched: 用以支持存在多個界面的 component ，但需要先給你的 component 添加 this.state.switched 并傳入本模塊來輔助判斷
- classname & style: 略
import PropTypes from 'prop-types';
import React, { Component } from 'react';
class Affix extends Component {
static NavBarHeight = xxx;
constructor(props) {
super(props);
this.state = {
affix: false,
};
this.offset = 0;
}
componentDidMount() {
window.addEventListener('scroll', this.handleScroll);
this.offset = this.refs.fixedNode.getBoundingClientRect().top - Affix.NavBarHeight - this.props.offset;
}
componentWillReceiveProps(nextProps) {
if (this.props.switched !== nextProps.switched) {
this.setState({ affix: false });
}
}
componentDidUpdate(prevProps) {
if (this.props.switched !== prevProps.switched && !this.state.affix) {
this.offset = this.refs.fixedNode.getBoundingClientRect().top - Affix.NavBarHeight - this.props.offset;
}
}
componentWillUnmount() {
window.removeEventListener('scroll', this.handleScroll);
}
handleScroll = () => {
const affix = this.state.affix;
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (!affix && scrollTop >= this.offset) {
this.setState({
affix: true,
});
}
if (affix && scrollTop < this.offset) {
this.setState({
affix: false,
});
}
};
render() {
const affix = this.state.affix ? 'affix' : '';
const style = this.state.affix ? this.props.style : {};
const { className } = this.props;
return (
<div
className={`${className || ''} ${affix}`}
style={style}
ref={'fixedNode'}
>
{this.props.children}
</div>
);
}
}
Affix.propTypes = {
className: PropTypes.string,
offset: PropTypes.number,
style: PropTypes.object,
switched: PropTypes.bool,
};
Affix.defaultProps = {
className: '',
offset: 0,
style: {},
switched: false,
};
export default Affix;
