How can I make a sticky banner stay above the footer?

Question

In my site, I have to create a policy banner.

My site already contains div for content and footer.

What I want?

I want to set this banner in a way that it will stick to user's view port bottom (note: it shouldn't be at the page bottom but it should stay at user's display bottom).
When user scroll through page, banner should stick at the bottom with scrolling, and that should stop when footer comes.
Footer will remain at the end of page.

now, most of things I have achieved but issue is to keep footer at bottom and banner Scrolling should stop above footer.

My example code:

.main-area {
  height: 1000vh;
  background-color: #ccc;
  width: 2000px;    
  position: relative;
}

.policy-banner {
  height: 100px;
  width: 2000px;
  color: yellow;
  background-color: blue;
  position: fixed;
  bottom: 0;
  left: 0;
}

.footer {
  background-color: black;
  height: 50px;
  color: white;
  position: fixed;
  bottom: 0;
  left: 0;
}

<html>
<head>
</head>
<body>
  <div class="main-area">
    <section>another sections coming dynamically</section>
    <section>another sections coming dynamically</section>

    <div class="policy-banner">
      this is banner, it should stick to the user's view port. 
      when user scroll, it will also scroll but upto footer and should not overlap with footer.
    </div>
  </div>

  <footer class="footer">
    this is footer. it will stay at the end of the page.
  </footer>
</body>
</html>

Any help would be really appreciated. thanks.

Edit: This is not duplicate question as what I wanted is css solution and this marked answer solved my issue with sticky banner.

Possible duplicate of [Stop fixed position at footer](https://stackoverflow.com/questions/8653025/stop-fixed-position-at-footer) — Alexandre Elshobokshy, Feb 01 '19 at 16:10
I am a bit confused. Why are both your footer and your banner fixed? Footer is generally used for something at the and of the page with special information on it. They generally don't move when scrolling. Also, you say you want your banner to be sticky, but don't write `position:sticky;` or emulate it with something similiar. Do you want it to be sticky (generally at a position, but move with the user, if they scroll it into viewport) or fixed (always at the bottom)? — SourceOverflow, Feb 01 '19 at 16:10

score 8 · Accepted Answer · answered Feb 01 '19 at 16:21

What you want, is to have position: sticky; instead of fixed. Without going too much into detail, position: sticky; means that the element is either behaving like it is relatively-positioned until it hits the condition and then behave like it is fixed for the duration that condition is fullfilled.

In the example below the condition is bottom: 0;, so it will begin fixed, because you start out in its parent div .main-area, but stop once you're outside of the parent div.

.main-area {
  background-color: #ccc;
}

.main-area .empty {
  height: 500px;
  background-color: #ddd;
}

.policy-banner {
  height: 100px;
  color: yellow;
  background-color: blue;
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
}

.footer {
  background-color: black;
  height: 50px;
  width: 100%;
  color: white;
}

<html>
<head>
</head>
<body>
  <div class="main-area">
    <div class="empty">Section 1</div>
    <div class="empty">Section 2</div>
    <div class="policy-banner">
      this is banner, it should stick to the user's view port. 
      when user scroll, it will also scroll but upto footer and should not overlap with footer.
    </div>
  </div>

  <footer class="footer">
    this is footer. it will stay at the end of the page.
  </footer>
</body>
</html>

The answer should mark as accepted answer! It is very clean and clear that do not need any js. Btw, I did not know about sticky position @SourceOverflow, thanks. — Seyhmus Gokcen, Feb 01 '19 at 16:26
@sourceOverFlow, yes this is what I was looking for. Thank you. — Bharat, Feb 02 '19 at 07:21
@SorceOverflow this position sticky is not working in IE. I tried to find another possible solution but didn't get succeeded. can you help me again? — Bharat, Feb 07 '19 at 12:24
@Bharat yes, IE doesn't support it. (https://caniuse.com/#search=sticky), but it should then just be relatively-positioned, which is all the support IE can expect: It does still works, but some features are missing. Really, I'd just leave it, unless you specifically develope your website for IE. But at that point, you kinda have to emulate all of the newer CSS-features with JS anyways, so your choice. — SourceOverflow, Feb 08 '19 at 15:56

score 0 · Answer 2 · answered Feb 01 '19 at 16:09

yes its very easy to do,

what you can do is, register your footer with a javascript function, which is called when footer appears in the user viewport, check this post,

How to Check if element is visible after scrolling?

when it footer gets appeared in the viewport turn the display of banner to display:none , using css, and when the footer gets off the viewport, turn the display to block, or whatever else none

How can I make a sticky banner stay above the footer?

2 Answers2