javascript - 知道什么时候位置: sticky div is stuck without jQuery

Question

我正在开发 Angular 元素的移动优先 UI，其中 position: sticky 的 div 需要更改其样式，因此如何仅在 div 卡住后才将样式应用于 div，而不使用 jQuery 等.

我试过使用 https://developers.google.com/web/updates/2016/04/intersectionobserver 但我无法模拟该功能

.title {
  font-size: 16px;
  color: black;
}


/*On being stuck*/

.title
/*::stuck*/

{
  font-size: 18px;
  background: grey;
}

<div style="height: 700px;">
  <div class="title" style="position: sticky; position: -webkit-sticky; top: 20px;">
    This div is to be styled on being 'stuck'
  </div>
</div>

Answer 1

<script>
    position = document.getElementsByClassName("title")[0].style.position;
    result = position === 'sticky';
    console.log(result);
</script>