折叠一个AppBar并同时在Material UI中滚动显示另一个AppBar

Question

我有Header.js组件。在它里面，我有两个AppBar，第一个AppBar是粘性的，第二个不是。默认情况下，仅显示第二个AppBar。当我们滚动时，我希望第二个AppBar折叠并且第一个AppBar显示在屏幕顶部。

我从Material-ui文档useScrollTrigger()中看到了here，但它只显示在滚动时隐藏AppBar。

// Header.js
import React from "react";
import { AppBar, Toolbar, Typography } from "@material-ui/core";

export default function Header() {
  return (
    <>
    <AppBar position="static">
      <Toolbar>
        <Typography variant="h6">First AppBar</Typography>
      </Toolbar>
    </AppBar>
    <AppBar position="static">
      <Toolbar>
        <Typography variant="h6">Second AppBar</Typography>
      </Toolbar>
    </AppBar>
    </>
  );
}

这是我的沙箱link

Answer 1

此代码似乎按您的意愿运行。我使用了Material-ui demo

import React from "react";
import { AppBar, Toolbar, Typography } from "@material-ui/core";
import useScrollTrigger from '@material-ui/core/useScrollTrigger';
import Slide from '@material-ui/core/Slide';

function HideOnScroll(props) {
  const { children, window } = props;
  const trigger = useScrollTrigger({ target: window ? window() : undefined });

  return (
    <Slide appear={false} direction="down" in={!trigger}>
      {children}
    </Slide>
  );
}

function ElevationScroll(props) {
  const { children, window } = props;
  const trigger = useScrollTrigger({
    disableHysteresis: true,
    threshold: 0,
    target: window ? window() : undefined,
  });

  return React.cloneElement(children, {
    elevation: trigger ? 4 : 0,
  });
}


export default function Header(props) {
  return (
    <>
      <ElevationScroll  {...props}>
      <AppBar>
        <Toolbar>
          <Typography variant="h6">First AppBar</Typography>
        </Toolbar>
      </AppBar>
      </ElevationScroll >
      {/* second appbar */}
      <HideOnScroll {...props}>
      <AppBar>
        <Toolbar>
          <Typography variant="h6">Second AppBar</Typography>
        </Toolbar>
      </AppBar>
      </HideOnScroll>
    </>
  );
}