Web footer Stays on bottom of page. Need it to appear on when scrolling down

My Web footer i made is supposed to show when you get to the bottom of the page, but stays on the bottom of the screen taking up half the screen.

My react website isn't working as intended. I have made a footer with links on the bottom of my page, but i wanted it to only show when you scroll down to the bottom of the page, not stay on the bottom always.

It is a lot of code so here is the Git Repository of the code so far: https://github.com/CodingWithTonyB/React-Web

I beleive the box position has to do with this code:

export const Box = styled.div`
padding: 80px 60px;
background: black;
position: fixed;
bottom: 0;
width: 100%;

i have read your code.

// path:App.js

    <div>
      <Footer />
      <Router>
      <Sidebar />
      <Routes>
        some thing...
      </Routes>
      </Router>
    </div>

if you just want make it show in the normal way, you can try some changes as follow:

    <div>
      <Router>
      <Sidebar />
      <Routes>
        some thing...
      </Routes>
      </Router>
      <Footer />
    </div>

and also you have to edit style in FooterStyle.js

export const Box = styled.div`
  padding: 80px 60px;
  background: black;
  position: absolute;
  bottom: 0;
  width: 100%;    
  background-attachment: scroll;
  background-position: 0% 0%;
- position: fixed;
- bottom: 0pt;
- left: 0pt;