Phát hiện khi phần tử được cố định với CSS position:sticky dùng Intersection Observer

Giới thiệu

Bằng cách áp dụng các kiểu CSS khác nhau cho phần tử có position: sticky, chúng ta có thể dễ dàng phát hiện khi nó trở thành "sticky".

Ví dụ

<!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: 24px; 
  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>

Kết quả

Đoạn mã trên sẽ cho kết quả sau: