关键代码

const H = 50; // header的高度

const H2 = H / 2;

let cy = 0;

class Home extends Component {

  @observable top = 0;

  @observable ms = 0;

  onScroll = ({ y }) => {

    let scrollLength = Math.abs(y - cy);

    if (y < cy) {

      l("paeg up");

      if (this.top >= -H) {

        const newTop = this.top - scrollLength;

        this.top = Math.max(newTop, -H);

      }

    } else if (y > cy) {

      // l("page down");

      if (this.top <= 0) {

        let newTop = this.top + scrollLength;

        this.top = Math.min(newTop, 0);

      }

    } else {

      // l("没动");

    }

    if (cy !== y) cy = y; // 保存这一次的值，在下一次作比较

  };

  onScrollEnd = ({ y }) => {

    const top = Math.abs(this.top);

    this.ms = 200;

    if (top <= H2) {

      l("show");

      this.top = 0;

    } else {

      l("hide");

      this.top = -H;

    }

    this.ms = 0;

  };

  render() {

    const { classes } = this.props;

    return (

      <div class={classes.root}>

        {/* hedaer */}

        <HomeHeader top={this.top} ms={this.ms} />

        <div className={classes.wraper}>

          <Scroll

            onScroll={this.onScroll}

            onScrollEnd={this.onScrollEnd}

            bounce={false}

          >

            <div> ... </div>

          </Scroll>

        </div>

      </div>

    );

  }

}

class HomeHeader extends Component {

  render() {

    const { top, ms } = this.props;

    return (

      <AppBar

        color="inherit"

        position="fixed"

        style={{

          transition: `transform ${ms}ms ease`,

          transform: `translateY(${top}px)`,

        }}

      > ... </AppBar>

    );

  }

}