js-is-sticky class added when item not stuck

[DavidChouinard]

See this codepen: https://codepen.io/DavidChouinard/pen/ebxrGG

I expect js-is-sticky to only be added when the item has reached the top of the screen — when it's "stuck". It appears the class is added anytime the viewport is partially scrolled, regardless of whether the sticky item has reached the top — is this is a bug?

(appears similar to issue #95)

[yowainwright]

I made minor tweaks to html in this forked codepen.

Hope it helps.

[DavidChouinard]

Sorry, here's a better test case: https://codepen.io/DavidChouinard/pen/ebxrGG

Header #1 behaves as expected, but notice how Header #2 triggers its stuck state midway through the page. How can I detect when Header #2 has reached the top?

[DavidChouinard]

Never mind, looks like the header/article combo need to be enclosed in a div for things to work. Thanks for you help @yowainwright!

[yowainwright]

@DavidChouinard,

Stickybits should work with the dom tree that you had setup if/after this feature is implemented—or by using the useFixed option (which won't perform as well in mobile safari).

---

Stickybits is most useful for "doing stuff" when it is sticky.

In my own UI discussions, I always suggest to only use position: sticky (no JS and not Stickybits). With the amount of browser support, I find the progressive enhancement approach of using only using position: sticky provides for a good experience in older browsers and a great experience most browsers...and all customers win b/c there is 1 less complex thing to worry about.

---

Thanks for your thoughtful issue and debugging.

[DavidChouinard]

Got it, thank you — will follow #327 for a resolution.