Opposite of position: sticky

Question

Setting the css attribute position to sticky causes the element to positioned relative until a certain point is scrolled too at which point it becomes fixed. How can I achieve the reverse i.e the element is fixed until a certain point then becomes relative.

To expand, imagine I have a large footer, 500px in height, which is initially out of the viewport. I want a button which initially falls to the bottom of the page, but, if the footer comes into view then the button should remain above the footer.

Answer 1

To make a element sticky at the top you add this:

element{
  position:sticky;
  top:0;
}

To make the element sticky at the bottom you need to replace top:0; with bottom:0;

element{
  position:sticky;
  bottom:0;
}