时间戳

首页 > 解决方案 > 在 Material UI 中滚动时折叠一个 AppBar 并同时显示另一个 AppBar

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

问题描述

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

我在这里useScrollTrigger()看到了 Material-ui 文档，但它只显示在滚动时隐藏 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>
    </>
  );
}

这是我的沙盒链接

标签： javascriptcssreactjsmaterial-uiappbar

解决方案

这段代码看起来像你想要的那样运行。我使用了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>
    </>
  );
}

推荐阅读