How can I catch the event when sticky-top fires?

Question

css

What you need: It is
necessary to make it so that after triggering sticky-topthis very block unfolds completely in height by 100%.


Hmm, I think I figured it out myself... See CodePen or:

HMTL

<p>lorem128</p>

<div class="sticky-top bg-primary text-white float-left rounded-right border p-2" id="sticky">Menu
</div>
<div id="stPos" class="p-2 sticky-top bg-light rounded border float-right">
  Menu coord:
</div>

<p>lorem2048</p>

JavaScript

let stPosID = document.getElementById("stPos");
let stickyID = document.getElementById("sticky");

window.addEventListener(
  "scroll",
  (e) => {
    let gbcr = stickyID.getBoundingClientRect();
    stPosID.innerText = "Menu coord: " + gbcr.y;
    if (gbcr.y <= 0) {
      stickyID.innerText = "Top 0 event!";
      stickyID.style.height = "100vh";
    } else if (gbcr.y > 0) {
      stickyID.innerText = "Menu";
      stickyID.style.height = "";
    }
  }
);