Javascript 折叠一个AppBar，同时在材质UI中滚动显示另一个AppBar

我有

Header.js

组件。在它里面，我有两个AppBar，第一个AppBar是粘性的，第二个不是。默认情况下，仅显示第二个AppBar。当我们滚动时，我希望第二个应用程序条折叠，第一个应用程序条在屏幕顶部显示“粘滞”

我在Material ui文档中看到了

UseCollTrigger（）

，但它只显示在scroll上隐藏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>
    </>
  );
}

//Header.js
从“React”导入React；
从“@material ui/core”导入{AppBar，工具栏，排版}；
导出默认函数头（）{
返回(
这段代码看起来像你想要的那样运行。我使用了material ui

从“React”导入React；
从“@material ui/core”导入{AppBar，工具栏，排版}；
从“@material ui/core/UseCrollTrigger”导入UseCrollTrigger；
从“@material ui/core/Slide”导入幻灯片；
功能隐藏滚动（道具）{
const{children，window}=props；
const trigger=useCrollTrigger（{target:window？window（）：undefined}）；
返回(
{儿童}
);
}
功能提升滚动条（道具）{
const{children，window}=props；
常量触发器=使用滚动触发器({
是的，
阈值：0，
目标：窗口？窗口（）：未定义，
});
返回React.cloneElement（儿童、{
标高：触发器？4:0，
});
}
导出默认函数标题（道具）{
返回(
第一个AppBar
{/*第二个appbar*/}
第二个AppBar
);
}
您好，我将您的代码复制到我的沙盒中，但它似乎没有如我预期的那样工作。它从一开始就显示了两个appbar，当我滚动时，我的第二个appbar折叠，留下要显示的第一个appbar。我不希望从一开始就显示第一个appbar（我只需要第二个appbar），但当我滚动时，第二个appbar必须折叠并显示第一个appbar。基本上，如果我们滚动，第一个appbar会替换第二个appbar。然后你可以尝试提升选项。我编辑了代码。最初只显示第二个appbar，滚动时它会隐藏，并且显示第一个appbar。
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>
    </>
  );
}