Detect When an Element Gets Fixed in CSS Position Sticky Using Intersection Observer

By applying various CSS styles to the element with the sticky position, we can easily detect when an element gets fixed.

Set the Sticky Navbar Div

Create divs and set the navbar −

<div id="first"></div>
<div id="navbar-top"></div>
<div id="container">Watch Me!</div>
<div id="parent-container"></div>

Style the Top Navbar

Set the height of the Top Navbar that will be fixed on the web page −

#navbar-top {
   background-color: lightgrey;
   height: 2px;
}

Set the Container div With Position Fixed

This will show the detection −

#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;
}

Set the box Shadow for the Sticky Navbar

The box shadow is set for thee navbar before the detection −

.sticky-navbar {
   box-shadow: inset 0 0 15px orange!important;
   font-size: 20px !important;
}

Script for Sticky Navbar With HTML DOM

Use the HTML DOM querySelector() and detect when an element gets fixed when the browser is scrolled −

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

Example

Let us now see an example to detect when an element gets fixed −

Open Compiler
<!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>
Updated on: 2023-11-01T14:10:14+05:30

3K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements