• Another event for CSS position: sticky

      Have you ever wondered how to track when elements with positions: sticky become fixed? Eric Bidelman has an amazing post on this topic, go and read it now.


      I've found some difficulties while using it in my project. Here they are:


      1. It breaks encapsulation. sticky-change event relates to header element, but you have to insert sentinels to header's parent (and make it position: relative).
      2. It involves lots of factors that should be consistent and their connection is not always obvious. For example you can't set --default-padding greater than 40px, which is top-sentinel's height.
      3. You can't track block in the middle of an article.

      Let's try to improve it!

      Читать дальше →