Sticky Footer that stops being sticky at a certain point on the page

Mike Earley 0
Viewed 17

I'm trying to build functionality that is identical to the conditionally sticky footer on this page: https://cashflow.chase.com/increase-cash-in/maximize-your-cash-on-hand.htm

As you scroll down the page, the footer stays in place until a certain point on the page, at which point it just becomes a part of the page flow and scrolls off screen. I need to duplicate that functionality but I'm unable to figure out how they're doing it on that page.

I'm building this functionality inside of a react application if that makes a difference. The footer is coded and is properly functioning as a sticky footer, but does not become part of the page flow at a certain point--it currently just stays sticky all the way down.

position css html
1 Answers

You can just use position: sticky; and bottom: 0; to achieve this.

.sticky
{
  position: sticky;
  font-size: 1.4em;
  padding: 10px;
  z-index: 1;
  bottom: 0px;
  background-color: aquamarine;
}
<body>
    <br/><br/><br/>
    <h1>Reference</h1>
    <br><br><br><br>
    <br><br><br><br>
    <br><br><br><br>
    <br><br><br><br>
    <br><br><br><br>
    <h1>Reference</h1>
    <br><br><br><br>
    <br><br><br><br>
    <br><br><br><br>
    <br><br><br><br>
    <br><br><br><br>
    <br><br><br><br>
    <br><br><br><br>
    <br><br><br><br>
    <br><br><br><br>
    <h1>Reference</h1>
    <br><br><br><br>
    <br><br><br><br>

    <div class="sticky">
        Sticky Positioning
    </div>

    <br><br><br><br>
    <br><br><br><br>
    <br><br><br><br>


</body>

Atharv Gupta0
Related