-1

Is it possible with jQuery or JS to detect when an element has become "stuck", from the css property, position: sticky?

I've attached a screenshot of the interface that I am trying to recreate.

If you look at the attached image, basically, when you scroll down the page, the purple tiles become "stuck", using the CSS property position: sticky.

When you scroll, I want it so that the correct letter in the alphabetical list at the top (in the light blue bar), becomes highlighted.

So essentially, I need to figure out a way to detect which tile is currently stuck to the top. I am asking if there is a jquery or javascript event to detect this.

Something like:

if ($("#a-tile").is(":sticky")) {
    $(".alphabet-nav-link[data-rel-id='a']").addClass("active");
}

Naturally, that doesn't work, and various Google searches have not shown much by way of results.

Is anybody aware of a way to do this?

enter image description here

John Hubler
  • 877
  • 1
  • 11
  • 27
  • Please read how to ask a [good question](https://stackoverflow.com/help/how-to-ask). Also please provide a [minimal reproducible](https://stackoverflow.com/help/minimal-reproducible-example) example of your issue on what have you tried and issues in `code` to get help from someone. There is a high chance you question will be closed and down-voted. – Always Helping Jul 07 '20 at 00:42
  • @AlwaysHelping - I restructured the question and added an image to better illustrate what I am attempting to accomplish. – John Hubler Jul 07 '20 at 00:54
  • Aardvarks and anteaters are different animals. Also, there should be some other property (like a class) on the element that determines that it's sticky. https://stackoverflow.com/questions/324486/how-do-you-read-css-rule-values-with-javascript can help you out, but it should be a last resort. – Charlie Bamford Jul 07 '20 at 01:10

1 Answers1

0

You can use jQuery's css method. Eg: $('#a-tile').css('position')

redouglas
  • 210
  • 1
  • 5