0

I have a banner that is fixed on a static webpage that you cannot scroll. However, on the next page, you can scroll. The problem is that when scrolling, the banner is always at the bottom while scrolling (meaning the user can see the banner even when they haven't scrolled yet). However, I want the banner to be able to not be shown when scrolling, and only be shown when the user scrolls all the way to the bottom. Here is my css code:

footer {
position: fixed;
padding: 20px 25x 20px;
bottom:0;
z-index:1;
text-alight:left;
}
Priya Varun
  • 1
  • 1
  • 1
    We need a [mcve] not one CSS rule – j08691 Jul 05 '22 at 14:48
  • Why are you using `position: fixed`? Why not use `position: relative`? – disinfor Jul 05 '22 at 14:49
  • When I use position:relative, the banner is at the bottom when scrolled down. However, on the static website where you can't scroll, the banner is half-way up the website – Priya Varun Jul 05 '22 at 14:51
  • @PriyaVarun - sure, that's a content issue - if you have a class or id on the `body` tag, you can target the static page to have the footer with `fixed` – disinfor Jul 05 '22 at 14:52
  • I think you are looking for a "sticky footer", if you want the footer to move then it can't be fixed - just add flex to your body and flex-grow to you main content div and that should push the footer to the bottom if the page is too large - see the duplicate – Pete Jul 05 '22 at 14:53
  • @disinfor, can you provide an example? – Priya Varun Jul 05 '22 at 14:54
  • @Pete can you provide an example? – Priya Varun Jul 05 '22 at 14:55

0 Answers0