Switch between two AppBars simultaneously while scrolling in Material UI

Question

Switch between two AppBars simultaneously while scrolling in Material UI

In my Header.js component, I have two AppBars. The first one is sticky and the second one is not initially visible. As we scroll down, I want the second AppBar to collapse and the first one to stay stickied at the top of the screen.

I looked at the Material-UI documentation and found the useScrollTrigger() method, but it only provides guidance on hiding an AppBar on scroll.

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

You can view my sandbox example here.

javascript css reactjs material-ui appbar

Answer 1

Answer №1

I utilized the material-ui demo to ensure that this code functions as intended and it seems to be working correctly.

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

Answer 2

I utilized the material-ui demo to ensure that this code functions as intended and it seems to be working correctly.

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

Switch between two AppBars simultaneously while scrolling in Material UI

Answer №1

Similar questions

Progress bar arrows undergoing transformation in shape

Prevent the bottom row from being sorted

utilizing a dynamic value within CSS modules for class naming

The required element was not discovered

Does the use of 'window.location.replace' in Chrome cause a session to be destroyed in PHP when redirecting to a specified page?

Using query strings to manipulate the URL of an iframe and add additional information

Adjusting the brightness of colors using JavaScript

Handling Events for the UNO Material Bottom Navigation Bar

Is there a minimum height requirement for overlapping items in React-Native using flex-box?

Concealing and revealing elements through css styling

Combining strings using the PHP preg_replace function

Deactivating the drag feature when setting the duration of a new event in FullCalendar

Guide on how to send files to an API using a form in React with MUI

Seeing <br> elements being inserted into a <div> element in the page source

A minimalist dropdown menu using only HTML and CSS with an onclick function

Can the image upload file size be customized or adjusted?

I am finding it difficult to navigate relative paths when using Master Pages

Unbinding or undoing an 'onclick' event when another 'onclick' event is triggered

The combination of Nest, Fastify, Fastify-next, and TypeOrm is unable to locate the next() function

Problem Installing Express Sharp using Docker