[Sticky / Visibility] Fixed Isn't Removed Until Top Offset is Surpassed by 1px

[srissel]

Hello,

I have a sticky header, residing above my page content.
It's all set up according to http://semantic-ui.com/modules/sticky.html.
(see Fiddle link below)

Scrolling down the page works fine: The header stays at the top of page, whereas the content scrolls below.

But when scrolling back top, the top of the page content gets stuck just below the header, which overlaps the page content.

I examined this using dev tools and saw that when scrolling down, Semantic UI adds classes "fixed" and "top" to the sticky header, which don't get removed when page is scrolled back to top again.
Meanwhile, as a workaround, I implemented an own handler, which detects the page is scrolled to top again and removes the classes manually.

Here is a JS Fiddle, to demonstrate the issue:
http://jsfiddle.net/Windwalker/vmk41s9j/2/

Can you tell whether this is a bug which will be fixed?
Or is there something I can to to avoid this behaviour beforehand?

Kind regards,
Sascha.

[jlukic]

This is an edge condition of sticky. Fixed isnt removed until it surpases its previous position not equals it. Since the content is exactly at 0px, it will not unstick. You can fix this by adding a 1pixel offset to scroll.

http://jsfiddle.net/quge5gba/

I'll look into seeing whether it messes up anything if we swap <= for <

If you need content that replaces itself with a placeholder, you should try using visibility. I should probably make a note of that in docs.

http://jsfiddle.net/335p89zg/1/

[bradiosd]

This fix still doesn't work great... The content appears to jump after 1px is surpassed and vice versa when you reach the top.

EDIT: Ignore my comment. Second jsfiddle fix managed to fix the glitching.

[jlukic]

Yeah visibility handles placeholder case, sticky does not (generally used for adjacent content)

[jlukic]

Fix accidentally got added in another commit 09ecab6 #2710, but fixed in next