Skip to content
This repository was archived by the owner on Oct 28, 2020. It is now read-only.

Understanding Stickybits and Position Sticky

Jump to bottom
Evan Lovely edited this page Mar 8, 2019 · 3 revisions

Understanding Stickybits and Position Sticky

There is confusion around position: sticky and position: fixed. For a deep dive into Stickybits, checkout out this post on CSS-Tricks.

Position: fixed high level

position: fixed at a high level, "positions" elements relative to the browser window.

  • It is very well supported.
  • It has a hard time dealing with a change in positioning, i.e., if it goes from position: static and then changes to position: fixed.
  • If you want a position: fixed element fix within a particular element—it has problems there too.

Common position: sticky and position: fixed issues

position: sticky at a high level, "positions" elements relative to its parent element.

  • It is newer and is not as supported as position: fixed.
  • It is hard to key an event into a change of when it becomes sticky
  • It can have problems when it is descendent child (not the first child) of its parent

Common Problems with both position: sticky and position: fixed

If there is a problem with position: sticky or position: fixed there are some common things to be aware of.

  • Is the "sticky" element a first child of its parent? Can it be?
  • Is there a float (float: left), clear (clear: left) or another positioning that could cause the "sticky" parent to not have its actual height?

Relating problems with position: sticky and position: fixed to Stickybits

Stickybits Parent/Child relationship

Although Stickybits is not a polyfill for position: sticky, it does rely on parent/child dom elements similarily to position: sticky.

Here is an example if the comment above is not clear

<div class="parent">
  <!-- the sticky element (.sticky-element-is-a-child-of-parent) depends on a specific parent to sticky correclty -->
  <div class="sticky-element-is-a-child-of-parent">
  </div>
</div>

This general principle becomes an issue in a few scenerios.

When sticky elements are all within the same parent:

<div class="parent">
  <div class="sticky-element-is-a-child-of-parent">
  </div>
  <div class="sticky-element-is-a-child-of-parent">
  </div>
  <div class="sticky-element-is-a-child-of-parent">
  </div>
  <div class="sticky-element-is-a-child-of-parent">
  </div>
</div>

Or, when the parent is the <body> element:

<body class="parent">
  <div class="sticky-element-is-a-child-of-body">
  </div>
</body>

Or, when there is an offset between the parent and the child:

<div class="parent" style="padding-bottom: 20px">
  <div class="sticky-element-is-a-child-of-body">
  </div>
</div>

Clone this wiki locally