tab吸顶效果的原理:改变tab的布局,当tab还在下面的时候,是正常的布局,当tab滑到顶部的时候,把tab改为绝对定位或者fixed定位来做,那如何知道tab是否滑到顶部,就要用scrollTop来计算,在这里可以在滚动的区域加上一个onScroll事件来监听页面滚到哪里了,这里有个地方要注意就是要在页面加上一个overflow:scroll属性才可以让页面滚动,才可以使onScroll事件生效;
import React from 'react';
class Test extends React.Component {
constructor(props) {
super(props);
this.state = {
info: null,
isSelectIntroduce:true,
scrollTop: 0,
minHeight:'calc(100% - 42px)',
};
}
onScroll = () => {
const topBoxHeight = this.box1 && this.box1.clientHeight;
if (this.box.scrollTop >= topBoxHeight) {
this.tab2.style.opacity = 1;
this.tab1.style.opacity = 0;
this.tab1.style.height = '0px';
} else if (this.box.scrollTop < topBoxHeight) {
this.tab1.style.opacity = 1;
this.tab1.style.height = '42px';
this.tab2.style.opacity = 0;
}
if(this.box.scrollTop === 0) {
this.setState({minHeight:'auto'});
}
}
handleTab(bool) {
this.setState({isSelectIntroduce:bool, minHeight:this.box.scrollTop === 0 ? 'auto' : 'calc(100% - 42px)'});
}
render() {
const {isSelectIntroduce, minHeight} = this.state;
return (
<div ref={(box) => (this.box = box)} style={{height: '100%', overflow: 'scroll', position:'relative'}} onScroll={this.onScroll}>
<div ref={(box) => (this.box1 = box)}>
<h1>1</h1>
</div>
<div style={{minHeight:minHeight, zIndex:99, position:'relative'}}>
<div style={{height: 42, transition:'all 0.5s ease'}} ref={(tab) => (this.tab1 = tab)}>
<div className="tabBox" >
<div onClick={() => this.handleTab(true)} >tab1</div>
<div onClick={() => this.handleTab(false)}>tab2</div>
</div>
</div>
<div style={{height: 42, position:'fixed', opacity:0,top:0, left:0, right:0, transition:'all 0.5s ease'}} ref={(tab) => (this.tab2 = tab)}>
<div className="tabBox" ref={(tab) => (this.tab2 = tab)}>
<div onClick={() => this.handleTab(true)} >tab1</div>
<div onClick={() => this.handleTab(false)}>tab2</div>
</div>
</div>`在这里插入代码片`
{isSelectIntroduce ? <IntroductionComponent /> : <CatalogueListComponent />}
</div>
</div >
);
}
}
export default Test;
在这里最关键的就是给整个div 设置一个最小高度保证当切换到内容少的时候,不会因为整个页面的scrollTop不一样导致页面回弹,最后在tab快要到顶部的时候给个动画过度一下这个布局的切换,那一切就会觉得很流畅