在react中实现组件吸附到窗口顶部

吸附原理

工作任务需求，某个单一标志性组件需要在页面滚动时吸附到窗口顶部，之前利用原生js实现过，基本原理是：
当滚动条相对于页面的距离大于元素高度时，设置该元素的定位为fixed。

API

使用的基本API是：

1. 获取当前窗口滚动条相对页面的长度，

• document.body.scrollTop //chrome
• document.documentElement.scrollTop//ie678
  以上两个api没有兼容器，但是好处是当一个有效时另一个的值为0，所以可以取两者和或者去最大值来获取真正的滚动条相对页面的长度。

2. 获取要吸附元素距离页面顶部距离

• document.getElementById(“id”).offsetTop //其中id为组件id

3. 窗口滚动监听函数

• window.onscroll

react实现

在react中实现与原生html类似，主要是在合适的地方对窗口滚动函数进行监听。具体代码如下

import React, { Component } from "react";
import style from "./MaterialOverview.scss"
import { Switch, Button } from "antd";
class MaterialOverview extends Component {
  constructor(props) {
    super(props)
    this.state = {
      eleFixedTop: 0,//元素或者组件距离页面顶部的距离
      fixed: false,//吸附标志位
    }
  }

  // 页面滚动处理函数
  onHandleScroll = () => {
    const { eleFixedTop } = this.state;
    //获取滚动距离
    let scroll = document.body.scrollTop + document.documentElement.scrollTop;
    //如果窗口滚动的距离 大于 元素距离页面顶部的距离，则设置元素为固定定位，实现吸附效果
    if (scroll >= (eleFixedTop - 20)) { //+10是为了吸附效果
      this.setState({
        fixed: true,
      })
    } else {
      this.setState({
        fixed: false,
      })
    }
  }
  componentDidMount() {
    //获取组件距离页面顶部距离
    const fixedTop = document.getElementById("overview").offsetTop;
    this.setState({
      eleFixedTop: fixedTop,
    })
    //滚动监听事件
    window.onscroll = this.onHandleScroll;
  }

  render() {
    const { data, onSwitchChange } = this.props;
    const { fixed } = this.state;
    return <div className={style.overview}>
      {
        // 固定定位脱离文档流会导致之前的元素被压住，这里用一个空的div来撑开
        //此div的高度与脱离文档流的相同
        fixed && <div style={{ height: `${document.getElementById('overview').clientHeight}px` }}></div>
      }
      <div className={`${style.fixed} clearfix`} id="overview" style={fixed ? { position: "fixed", top: "0px", } : { position: "relative" }}>
            这里是要固定的内容，省略。。。
      </div>

    </div>

  }
}
export default MaterialOverview