React实现导航随页面滚动后固定/取消固定在视口顶部

1、针对需求：在React项目中，页面中一个导航栏，当页面向下滚动，导航栏即将消失时固定在视口顶部不动，当页面向上滚动，滚动到导航栏原始所在位置时，导航栏跟着下来，恢复初始布局；

2、实现方案：

　　1）样式代码中定义两个类，正常样式（.menu），固定在顶部时的样式（.fixed）；

　　2）组件state中定义一个变量（isFixed），用于标记元素是否需要固定在顶部；

　　3）利用 .offsetTop属性获取导航元素距离页面顶部的距离x；

　　4）监听页面滚动事件，window.onscroll()，在滚动事件中获取页面滚动距离y（Math.max(document.body.scrollTop, document.documentElement.scrollTop)），通过判断x和y的大小关系，修改isFixed的值，更新样式；

　　5）在组件卸载时，移除事件监听 EventEmitter.removeAllListeners();

3、代码展示：

　　1）样式&元素

.menu{
  height: 50px;
  width: 100%;
  background-color: #eee;
}
.fixed{
  position: fixed;
  top: 0;
  width: 100%;
}

 

<div id='fixed-menu' className={`menu ${this.state.needFixed ? 'fixed' : ''}`}>
    日期导航
 </div>

　　2）state

 

constructor(){
    super(props)
    this.state = {
        needFixed: false
    }
}

 

　　3）事件监听

 

  componentDidMount() {

    const fixedTop = document.getElementById('fixed-menu').offsetTop;
    window.onscroll = () => {
      let scrollTop = Math.max(document.body.scrollTop, document.documentElement.scrollTop)
      //控制元素块A随鼠标滚动固定在顶部
      if (scrollTop >= fixedTop) {
        this.setState({ isFixed: true })
      } else if (scrollTop < fixedTop) {
        this.setState({ isFixed: false })
      }
    }
  }

 

　　4）移除事件

  componentWillUnmount() {
    EventEmitter.removeAllListeners();
  }

 

 4、综上即可实现，导航栏滚动到顶部时固定在顶部，页面向上滚动到导航栏位置时，导航栏跟随页面回到正常位置

 

转载于:https://www.cnblogs.com/cassiel/articles/10445197.html