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

CSS Web Development Front 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

<!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 −

AmitDiwan

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

Previous Page Print Page