<div class="parent">
  
  <br />  
  <br />  
  <br />  
  <br />
  
  <div class="myElement">Hola 🙂</div>
  
</div> 

.parent { 
  height: 2000px; 
}

.myElement {
  position: sticky;
  top: -1px;
}

.is-pinned {
  color: white;
  background: blue;
}

const el = document.querySelector(".myElement")
const observer = new IntersectionObserver( 
  ([e]) => e.target.classList.toggle("is-pinned", e.intersectionRatio < 1),
  { threshold: [1] }
);

observer.observe(el);