react吸顶组件封装

今天闲来无事练习了一下,封装了一个react吸顶组件,代码分享一下。

import React from 'react';

import PropTypes from 'prop-types';

class Ceiling extends React.Component {

  pRef = new React.createRef(); //占位容器

  cRef = new React.createRef(); // 吸顶组件容器

  componentDidMount() {

    this.windowOnScroll();

  }

  //滚动事件监听

  windowOnScroll() {

    let pDiv = this.pRef.current;

    let cDiv = this.cRef.current;

    window.onscroll = () => {

      //如果到顶部了 吸顶组件固定定位 并且 占位容器设置高度

      if (pDiv.getBoundingClientRect().top <= 0) {

        cDiv.style = 'position:fixed;width:100%;z-index:10;top:0;left:0';

        pDiv.style.height = `${this.props.height}px`;

      } else {

        cDiv.style = 'position:relative;';

        pDiv.style.height = 0;

      }

    };

  }

  render() {

    return (

      <div style={{ height: `${this.props.height}px`, position: 'relative' }}>

        <div className="placeholder" ref={this.pRef} />

        <div ref={this.cRef} className="ceilings_content">

          {/* 吸顶的内容由父组件提供 */}

          {this.props.children}

        </div>

      </div>

    );

  }

}

Ceiling.propTypes = {

  children: PropTypes.node.isRequired,

  height: PropTypes.number

};

export default Ceiling;
欢迎留言交流

发表评论

电子邮件地址不会被公开。 必填项已用*标注