Forem

Cover image for How to know when CSS position sticky get's applied
bhupendra
bhupendra

Posted on • Edited on

11 4

How to know when CSS position sticky get's applied

Often we require an element to have a position sticky when we scroll down the page. position: sticky can be thought as a combination of position: relative and position: fixed, an element remains in relative position until a point and then changes to fixed position.



.sticky {
  position: -webkit-sticky;  /* for safari */
  position: sticky;
  top: 0px;
}


Enter fullscreen mode Exit fullscreen mode

above element would be in position relative untill it's 0px from top , after that it changes to position:fixed.

Prior to the sticky position, there was a JS solution to implement above behavior, which would require scroll event listener

Support for position Sticky:

Position-sticky

IE and previous versions of Edge browsers do not support sticky position, it can be resolved using stickyfill polyfill.

Know when an element gets sticky position :

CSS position sticky does not provide an event when the element gets the sticky position, there could be many use cases like changing style when element gets the sticky position, as a user scrolls the page, update a floating TOC widget to the current section, etc..

Intersection Observation API is a Web API which helps to get callbacks fired when certain DOM elements “intersect” with one another. Intersection API asynchronously monitors the intersection of a target element with other elements which has a performance advantage over adding callbacks to the scroll events. IE has a polyfill for this API.


Example :

☝ code shows that an element gets a fixed position on scrolling. When fixed, a CSS class is added to the element that changes its background color and updates icon. When sticky position is removed, the class is removed.


Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay