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快要到頂部的時候給個動畫過度一下這個佈局的切換，那一切就會覺得很流暢