關鍵代碼

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>
    );
  }
}
 

react better-scroll 編寫類似手機chrome的header顯示隱藏效果