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.

Schadenfreude

Hello, can you paste your code nad maybe a prieview of our page – Oakes

you can use Waypoints to track if an element is inside the viewport. Basically it tracks whether the element has "passed" a threshold in your viewport and if it does, it applies changes uses javascript. I made something similar before, but THIS only demonstrates the use of Waypoints and not really the behavior you need. – Jephum

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;
}

Taffy

Demo – Murr

there's still a sort of natural behaviour that doesn't seem possible out of the box: when scrolling down toward a sticky element: bottom 0: starts fixed to the bottom of the screen, when it reaches its natural position at the bottom of the screen it sticks there top 0: starts relative, when it reaches its natural position at the top of the screen it sticks there ???: relative, when it reaches its natural position at the bottom of the screen it sticks there – Mezzorilievo

Sorry, but i am confused about why this is marked as the correct answer. Isn't the question how to let it be sticky until a certain point is reached, not how to make it sticky in general?!(!) Because i have the same question - just with a different practical use. – Fusspot

Answer 2

The trick is to take advantage of the "stickiness" being dependent on the containing block. As MDN puts it:

...at which point it is treated as "stuck" until meeting the opposite edge of its containing block.

So you need the containing block to start where you want the sticky element to start being sticky (in your case, at the top of the page), and to end where you want the sticky element to stop being sticky (in the footer).

It gets a little tricky if you wanted it to get "unstuck" somewhere in the middle of a footer (like I was needing), but it's totally doable. Here's a basic example where I "split" the footer into top and bottom elements to allow the button to appear like it's getting unstuck inside the footer (see at JS Fiddle).

HTML

<div class="sticky-wrapper">
  <main>
    Scroll down
  </main>
  <footer class="top"> 
  </footer>
  <div class="sticky">
    <button>Button</button>
  </div>
</div>
<footer class="bottom">
</footer>

CSS

main {
  min-height: 200vh;
}

.sticky {
  position: sticky;
  bottom: 50px;
  height: 0;
  padding: 0 16px;
}

footer {
  background: #808080;
}

footer.top {
  height: 16px;
}

footer.bottom {
  height: 100px;
}

Whitman