CSS/HTML - 在内容之前滚动标题

Question

我试着弄清楚是否可以只隐藏导航栏的上部。请参见下面的 Img(绿色标记区域)。这应该模仿 whatsapp-app 之类的导航栏行为。

我正在为这个用例使用 ma​​terial-ui。在我的实现中，只有当滚动位置为 < 48px 时，应用栏才会再次扩展。在 .gif 文件(见下文)中，它会在每次向上滚动事件时扩展。看起来应用栏只会先滚动，直到到达固定位置。之后，其余内容开始滚动。

编辑

我实现了一个概念验证，但它并没有像预期的那样工作:stackblitz

我的方法如下所示:

export default function TabBar() {
  const [value, setValue] = React.useState(0);
  const [yOffset, setYOffset] = React.useState(0);

  function handleChange(event: React.ChangeEvent<{}>, newValue: number) {
    setValue(newValue);
  }

  function transitionY() {
    const transitionYthreshold = 48;
    return Math.min(transitionYthreshold, yOffset);
  }

  useEffect(() => {
    window.addEventListener('scroll', handleScroll, { passive: true });
    return () => window.removeEventListener('scroll', handleScroll);
  });

  function handleScroll() {
    setYOffset(window.pageYOffset);
  }

  return (
    <React.Fragment>
      <AppBar
        position="sticky"
        color="default"
        style={{
          transition: 'all 0.1s',
          transform: `translateY(-${transitionY()}px)`
        }}
      >
        <Toolbar style={{ minHeight: '48px' }}>
          <div style={{ width: '30px', marginRight: '1em' }} />
          <span style={{ fontWeight: 'bold', fontSize: '20px', verticalAlign: 'super' }}>Help-Educate</span>
        </Toolbar>
        <Tabs
          value={value}
          onChange={handleChange}
          indicatorColor="primary"
          textColor="primary"
          variant="fullWidth"
        >
          <Tab label="Home"  {...a11yProps(0)}/>
          <Tab label="Donations"  {...a11yProps(1)}/>
          <Tab label="About Us"  {...a11yProps(2)}/>
        </Tabs>
      </AppBar>
      <TabPanel value={value} index={0}>
        <Container>
          {**SomeSuperLongText**}
        </Container>
      </TabPanel>
      <TabPanel value={value} index={1}>
         {**SomeSuperLongText**}
      </TabPanel>
      <TabPanel value={value} index={2}>
         {**SomeSuperLongText**}
      </TabPanel>
    </React.Fragment>
  );
}

我创建了一个 gif 图像，行为应该是这样的: dropbox-link

Answer 1

很可能这不是最优雅的解决方案，但在尝试之后我想出了以下方法:

import React from "react";
import PropTypes from "prop-types";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import CssBaseline from "@material-ui/core/CssBaseline";
import useScrollTrigger from "@material-ui/core/useScrollTrigger";
import Box from "@material-ui/core/Box";
import Container from "@material-ui/core/Container";
import Slide from "@material-ui/core/Slide";

function HideOnScroll(props) {
  const { children } = props;
  const trigger = useScrollTrigger({
    threshold: 0
  });

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

HideOnScroll.propTypes = {
  children: PropTypes.element.isRequired
};

export default function HideAppBar(props) {
  return (
    <React.Fragment>
      <CssBaseline />
      <HideOnScroll {...props}>
        <AppBar>
          <Toolbar>
            <Typography variant="h6">Scroll to Hide App Bar</Typography>
          </Toolbar>
        </AppBar>
      </HideOnScroll>
      <Toolbar />
      <AppBar position="sticky">
        <Toolbar>
          <Typography variant="h6">Bar will stay</Typography>
        </Toolbar>
      </AppBar>
      <Container>
        <Box my={2}>
          {[...new Array(20)]
            .map(
              () => `Cras mattis consectetur purus sit amet fermentum.
Cras justo odio, dapibus ac facilisis in, egestas eget quam.
Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et.`
            )
            .join("\n")}
        </Box>
      </Container>
    </React.Fragment>
  );
}

--> 只需在您的内容容器中放置另一个粘性应用栏，并修改带有阈值选项的 useScrollTrigger

在这里查看:https://codesandbox.io/s/serverless-cache-rcxen