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

我试图找出是否有可能只隐藏导航条的上部。参见下面的Img（绿色标记区域）。这应该模仿像whatsapp应用程序那样的导航栏行为

我正在为这个用例使用材质ui。在我的实现中，仅当滚动位置为<48px时，应用程序栏才会再次扩展。在.gif文件（见下文）中，它会在每次向上滚动事件时扩展。它看起来也像是应用程序条只会先滚动，直到它到达固定位置。然后，其余内容开始滚动

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

我的做法如下：

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

导出默认函数TabBar（）{
const[value，setValue]=React.useState（0）；
const[yOffset，setYOffset]=React.useState（0）；
函数handleChange（事件：React.ChangeEvent，newValue:number）{
设置值（新值）；
}
函数传递（）{
常数传递阈值=48；
返回Math.min（transitionThreshold，yOffset）；
}
useffect（（）=>{
addEventListener（'scroll'，handleScroll，{passive:true}）；
return（）=>window.removeEventListener（'scroll'，handleScroll）；
});
函数handleScroll（）{
setYOffset（window.pageYOffset）；
}
返回(

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

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


从“React”导入React；
从“道具类型”导入道具类型；
从“@material ui/core/AppBar”导入AppBar；
从“@material ui/core/Toolbar”导入工具栏；
从“@material ui/core/Typography”导入排版；
从“@material ui/core/CssBaseline”导入CssBaseline；
从“@material ui/core/UseCrollTrigger”导入UseCrollTrigger；
从“@material ui/core/Box”导入框；
从“@material ui/core/Container”导入容器；
从“@material ui/core/Slide”导入幻灯片；
功能隐藏滚动（道具）{
const{children}=props；
常量触发器=使用滚动触发器({
阈值：0
});
返回(
{儿童}
);
}
HideOnScroll.propTypes={
子项：PropTypes.element.isRequired
};
导出默认函数HideAppBar（道具）{
返回(
我看过whatsapp导航栏，我明白你想要什么

实际上，您可以使用
窗口.pageYOffset
并在
窗口.onscroll
功能中设置
导航栏的
样式.top

网站上显示了一个示例，其工作方式与您提到的相同。
以下是我的解决方案：

我正在使容器具有可滚动的文本（我让滚动条可见，这样您可以更好地看到发生了什么，但是您可以使用css轻松地删除它们）

我很欣赏你的努力。真的。但是感觉这种方法真的很有黑客味。你觉得怎么样？嘿。我更新了代码库。实际上你不需要在容器中包装任何东西并添加自定义类。我认为这样做很好。仍然不是我期望的那样。你在移动设备上附带了whatsapp吗？th在你明白我的意思之前，我想说的是Appbar。事实上，在我的移动设备上，Whatsapp没有“部分”的Appbar消失。你有网站的例子吗？我用我的方法和一个gif文件更新了我的问题，它的结尾应该是什么样子。你能把gif贴在它实际是动画的地方吗？它是动画的。如果你下载它。我必须登录Dropbox下载它，对吗？@adam只需点击“直接下载”它将在不登录Dropbox的情况下下载此解决方案通常是最接近的方法，但在每次向上/向下滚动事件中，navbar徽标都会出现/消失。在这种情况下，仅当您滚动到页面顶部时，徽标才会出现。
<Container
          style={{
          top:48,
          paddingTop:48,
          bottom: - 48,
          scrollTop: yOffset - transitionY(),
          pointerEvents: transitionY()<48?"none":"auto"
        }} className="cont" onScroll={handleInsideScroll}>