Knowing when the position: sticky div is stuck without jQuery

Question

I am working on a mobile first UI of an Angular project, where the div which is position: sticky needs to change its style, so how can I apply styling to the div only after it is stuck, without using jQuery, etc.

I've tried using https://developers.google.com/web/updates/2016/04/intersectionobserver but I am not able to mock that functionality

.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>

If you're asking for a pseudo selector, it [isn't possible yet](https://stackoverflow.com/a/25312347/4051471) — shrys, Jul 09 '19 at 11:51
If you know how to do it with JQuery, you can use [this website](http://youmightnotneedjquery.com/) to convert it to plain JS — Cristian Traìna, Jul 09 '19 at 12:49

score 1 · Answer 1 · answered Jul 09 '19 at 11:50

1

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

answered Jul 09 '19 at 11:50

Aaron Pfoltzer

79
3

I'm not sure the OP is asking for this. `sticky` can have different behaviours according to scrolling, I guess he meant how to distinguish them – Cristian Traìna Jul 09 '19 at 12:41
This logs false to console. Besides doesn't log 'sticky' on being sticky. Thank you tho. Any other workarounds? – Ajinkya Bawaskar Jul 11 '19 at 11:22

Knowing when the position: sticky div is stuck without jQuery

1 Answers1