Detect when an Element Gets Fixed in CSS position:sticky using Intersection Observer

CSSWeb DevelopmentFront End Technology

By applying various CSS styles to the element with the sticky position, we can easily detect it.

The following example shows this property.

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
#first {
   background-color: lightgrey;
   height: 10px;
}
#navbar-top {
   background-color: lightgrey;
   height: 2px;
}
#container {
   position: sticky;
   top: 0;
   box-shadow: inset 0 0 25px navy;
   height: 55px;
   text-align: center;
   font-size: 24x;
   line-height: 55px;
   font-weight: bold;
   transition: font-size 0.4s ease-in;
}
.sticky-navbar {
   box-shadow: inset 0 0 15px orange!important;
   font-size: 20px !important;
}
#parent-container {
   background-color: aliceblue;
   height: 3300px;
}
</style>
</head>
<body>
<div id="first"></div>
<div id="navbar-top"></div>
<div id="container">Watch Me!</div>
<div id="parent-container"></div>
<script>
let newObserver = new IntersectionObserver(function(entries) {
   if(entries[0].intersectionRatio === 0)
      document.querySelector("#container").classList.add("sticky-navbar");
   else if(entries[0].intersectionRatio === 1)
      document.querySelector("#container").classList.remove("sticky-navbar");
}, { threshold: [0,1] });
newObserver.observe(document.querySelector("#navbar-top"));
</script>
</body>
</html>

Output

This will produce the following result −

raja
Published on 13-Mar-2021 12:06:02
Advertisements