CSS Sticky navigation with JavaScript

/* STICKY NAVIGATION */  
.sticky .header {  
  position: fixed;  
  top: 0;  
  bottom: 0;  
  width: 100%;  
  height: 8rem;  
  padding-top: 0;  
  padding-bottom: 0;  
  background-color: rgba(255, 255, 255, 0.97);  
  z-index: 999;  
  box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.03);  
}  

/* Compensate the header space as it's taken out of the document flow */  
/* Applied if sticky class exists in one of section hero parents */  
/* So sticky class should be added to body element itself */  
.sticky .section-hero {  
  margin-top: 9.6rem;  
}  

// Sticky navigation  
const sectionHeroEl = document.querySelector(".section-hero");  

const obs = new IntersectionObserver(  
  function (entries) {  
    const ent = entries[0];  

    if (!ent.isIntersecting) {  
      document.body.classList.add("sticky");  
    } else {  
      document.body.classList.remove("sticky");  
    }  
  },  
  {  
    // In the viewport  
    root: null,  
    threshold: 0,  
    rootMargin: "-80px", // -height: 8rem;  
  }  
);  
obs.observe(sectionHeroEl);