react实现tab吸顶效果，切换tab防抖动，防回弹

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快要到顶部的时候给个动画过度一下这个布局的切换，那一切就会觉得很流畅