浅谈react.js中实现tab吸顶效果的问题

在react项目开发中有一个需求是，页面滚动到tab所在位置时，tab要固定在顶部。

实现的思路其实很简单，就是判断当滚动距离scrollTop大于tab距离页面顶部距离offsetTop时，将tab的position变为fixed。

在react中，我在state中设置一个navTop属性，切换这个属性的值为true或者false，然后tab标签使用classnames()这个方法来利用navTop的值添加类名fixed。

一开始我是这样写的：

class FixedTab extends React.Component{
constructor(props){
super(props);

this.state = {
navTop: false
}

this.$tab = null;
this.offsetTop = 0;
}

componentDidMount(){
this.$tab = this.refs.tab;
if(this.$tab){
this.offsetTop = this.$tab.offsetTop;
window.addEventListener('scroll',this.handleScroll);
}
}

handleScroll(){
let sTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

if(sTop >= this.offsetTop){
this.setState({
navTop: true
})
}

if(sTop < this.offsetTop){
this.setState({
navTop:false
})
}
}

render(){
return(
<div ref="tab" className={cs({'fixed':this.state.navTop})}>

)
}
}