Creating a smooth fixed / sticky slideshow layout with react-intersection-observer

I am trying to build a react component with a large fixed div and a navbar below. Initially, the div should remain fixed at the top left and scroll through a number of slides as the user scrolls, before its display property reverts to absolute and it scrolls out of view. Meanwhile, the nav's position becomes sticky and scrolls to the top of the window where it remains.

I've managed to build something hacky using react-intersection-observer and a number of hidden 'ghost' elements which allow the slides to cycle between opacity 0 or 1, but the outcome is not great and I feel there must be an easier way to achieve this effect. In particular it is problematic having to account for the page position when the main component becomes absolute positioned and requires a 'top' value.

Any advice is appreciated thanks. Sample code is below:

import * as React from 'react';
import { useInView } from 'react-intersection-observer';
import styled from 'styled-components';

const OuterContainer = styled.div`
  height: 500vh;
`;

const Card = styled.div`
  box-sizing: border-box;
  position: fixed;
  top: 0;
  width: 100%;
  height:64vh;
  transition: 1s;
  z-index: 5;
  &.hidden {
    opacity: 0;
  }
  &.show {
    opacity: 1;
  }
  &.border {
    position: absolute;
    top: 0;
  }
`;

const AltCard = styled(Card)`
  position: static;
`;

const CardContainer = styled.div`
  height: 64vh;
`;

const FirstCard = styled(Card)`
  opacity: 1;
`;

const CardGhost = styled.div`
  height:64vh;
`;

const LastGhost = styled.div`
  box-sizing: border-box;
`;

const GhostContainer = styled.div`
  width: 100%;
  position: absolute;
  top: 0;
`;

const MainContainer = styled.div`
  position: fixed;
  width: 100%;
  top: 0;
  &.moving {
    position: absolute;
    top: 156.5vh;
  }
`;

const HeaderBar = styled.div`
  top: 64vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 8rem;
  background-color: #44ff44;
`;

export default function IntroSection() {
  const options = { threshold: 0.66 };
  const [ref0, visible0] = useInView({ threshold: 0 });
  const [ref1, visible1] = useInView(options);
  const [ref2, visible2] = useInView(options);
  const [ref3, visible3] = useInView(options);
  const [ref4, visible4] = useInView({ threshold: 0.33 });

  return (
    <>
      <OuterContainer>
        <GhostContainer>
          <CardGhost ref={ref0} />
          <CardGhost ref={ref1} />
          <CardGhost ref={ref2} />
          <CardGhost ref={ref3} />
          <LastGhost ref={ref4} />
        </GhostContainer>

        <CardContainer>
          <FirstCard
            className={visible0 ? 'show' : 'hidden'}
            style={{ backgroundColor: 'lightBlue' }}
          />
          <Card
            className={visible1 ? 'show' : 'hidden'}
            style={{ backgroundColor: 'lightGreen' }}
          />
          <Card
            className={visible2 ? 'show' : 'hidden'}
            style={{ backgroundColor: 'lightYellow' }}
          />
        </CardContainer>
      </OuterContainer>

      <MainContainer
        className={visible4 && 'moving'}
      >
        <AltCard
          className={visible3 ? 'show' : 'hidden'}
          style={{ backgroundColor: '#ffBBFF' }}
        />
        <HeaderBar><h1>THIS IS THE NAVBAR</h1></HeaderBar>
      </MainContainer>
    </>
  );
}