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 (
                
 (this.box = box)} style={{height: '100%', overflow: 'scroll', position:'relative'}} onScroll={this.onScroll}>
                    
 (this.box1 = box)}>
                        
1
                    
                    

                        
 (this.tab1 = tab)}>
                            

                                
 this.handleTab(true)} >tab1
                                
 this.handleTab(false)}>tab2
                            
                        
                        
 (this.tab2 = tab)}>
                            
 (this.tab2 = tab)}>
                                
 this.handleTab(true)} >tab1
                                
 this.handleTab(false)}>tab2
                            
                        
`        `
                        {isSelectIntroduce ?  : } 
                    
                
            );
        }
}

export default Test;

여기 서 가장 관건 적 인 것 은 전체 div 에 최소 높이 를 설정 하 는 것 입 니 다. 내용 이 적 을 때 전체 페이지 의 scroll Top 이 다 르 기 때문에 페이지 가 재생 되 지 않도록 하 는 것 입 니 다. 마지막 으로 tab 이 곧 상단 에 도착 할 때 애니메이션 에 이 레이아웃 의 전환 을 지나치게 하면 모든 것 이 유창 하 게 느껴 집 니 다.