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:
- It breaks encapsulation.
sticky-changeevent relates to header element, but you have to insert sentinels to header's parent (and make itposition: relative). - It involves lots of factors that should be consistent and their connection is not always obvious. For example you can't set
--default-paddinggreater than40px, which is top-sentinel's height. - You can't track block in the middle of an article.
Let's try to improve it!