-2

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%;
Anthony
  • 1
  • 6

1 Answers1

1

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;
Mee
  • 81
  • 6
  • i found a better way. I watched a video [link: https://www.youtube.com/watch?v=pggIVY5eOGM] that explained that i shouldn't use position, but instead should use: '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;' – Anthony Mar 17 '23 at 05:13
  • if you want FOOTER show when page scroll to bottom, first, you should set FOOTER's `display` into `none`, then add `transform: display 1s` on FOOTER to make this animate work, sencond, you need listen `scroll` event to change `display` from `none` to `block` on FOOTER. – Mee Mar 17 '23 at 05:37
  • addon `opacity` can make it elegent. origin state is `display:none;opacity:0`, use js `dom.style.display = 'block';dom.style.opacity = 1` under control. – Mee Mar 17 '23 at 05:48