react顶部导航栏固定顶部

顶部固定导航方式千千万，我只推荐三种，觉得有用可以点个赞，谢谢

(推荐第三种组件库)

1. 原生方法

事件监听方法包括window.addEventListener(“scroll”, () => {})
和window.ontouchmove = () => {}。（主要应对苹果系统）

    class Product extends Component {
    	constructor() {
        	super();
        	this.onScroll = this.onScroll.bind(this)
   	    }
    // 组件加载
        componentDidMount() {
        	this.scrollEvent();
        }
    // 组件卸载
        componentWillUnmount() {
        	window.removeEventListener("scroll", this.onScroll);
        	clearTimeout(this.onScroll);
        	clearTimeout(this.scrollEvent);
        }
        // 添加事件监听
        scrollEvent() {
        	window.addEventListener("scroll", this.onScroll);
        }
    // 事件监听方法
        onScroll() {
        	const fixedTop = document.getElementById("topBanner").offsetTop + 0.1;
        	window.ontouchmove = () => {
        		let scrollTop = Math.max(
        			document.body.scrollTop,
        			document.documentElement.scrollTop,
        			window.pageYOffset
      			);
      		if (scrollTop > fixedTop) {
        		this.setState({ isFixed: true });
      		} else if (scrollTop <= fixedTop) {
        		this.setState({ isFixed: false });
      		}
    	};
   		window.addEventListener("scroll", () => {
      		let scrollTop = Math.max(
        		document.body.scrollTop,
        		document.documentElement.scrollTop,
        		window.pageYOffset
      		);
      		if (scrollTop > fixedTop) {
        		this.setState({
          			isFixed: true,
          			isPCFixed: true
        		});
      		} else if (scrollTop <= fixedTop) {
        		this.setState({
          			isFixed: false,
          			isPCFixed: false
        		});
      		}
    	});
 	}

2. react-native 实现列表吸顶效果

使用RN自带组件SectionList自带的特性
（SectionList在使用的时候section都会吸顶停留，因为ios的系统特性默认的。但Android上不行，所以需要设置 stickySectionHeadersEnabled=true。）

<SectionList
        renderSectionHeader={this.renderSectionHeader}
        renderItem={this.renderItem}
        sections={tempArr}
		stickySectionHeadersEnabled={true}
        ItemSeparatorComponent={() => 
        	<View>
       			<Text></Text>
            </View>}
            ListHeaderComponent={() => 
               <View style={
                  { 
                     backgroundColor: '.....', 
                     alignItems: 'center', 
                     height: ..... 
                   }
               }>
               <Text style={
                  { 
                     fontSize: ....., 
                     color: '....'
                  }
               }>
               导航栏
               </Text>
            </View>
          }
 />

3. ant 组件库的顶部吸顶方式

使用Affix组件，（使用组件库最省事）

<div>
  <Affix offsetTop={this.state.top}>
     <div id="topBanner">{topBanPC}</div>
  </Affix>
</div>

本文地址：https://blog.csdn.net/xieyizi95/article/details/109358978