elements disappear from view, rather than scroll out of view

[placenamehere]

Looking at the demo (as well as my own test implementation) with Chrome 35 OS X, when an element switches from .fixedsticky-on to .fixedsticky-off it just out of view, but in sticky supporting environments it will be stuck to the bottom of the container and scroll out of view.

This jump is particularly jarring with taller elements (for example, a sticky sidebar rather than the short demo header), a behavior I can't have this happen in my particular project.

Example: scroll down in the demo watch the behavior of the red "Fixed to viewport top A." banner (#top-a) in demo when the first grey .container begins to leave view.

Potential Solution: Perhaps rather than using the "off" mode, having an "end" mode, setting position:absolute; bottom:0 (or calculated top) so the .fixedsticky item doesn't go poof?

[zachleat]

Yeah, this is a known issue, currently listed as Make sticky smoother on transition between sticky/static for container based as a TODO on the readme. I like your idea! I’ll have a look.

[placenamehere]

here's a different query plugin where I'm doing that type of work already. it now does some sticky polyfilling, behind the other work it does managing display based on size of a column's content, and other special behavioral tests that one of my sites needed.

i ended up just using negative top w/ fixed positioning to scroll the element off screen. absolute/bottom would save some need to content related measurements, but for this case I was already doing them all.

https://github.com/placenamehere/stickycolumn

[zachleat]

Alright, this should be working in the issue-28 branch. Have a look, I’ll leave it here for a bit and think over the weight/benefit of the feature.

[rap1ds]

+1 This was exactly what I needed. I hope to see this also in the master branch.

[hnrch02]

This is a blocking issue for most of my use cases. The code in the issue-28 branch works fine, there's just two things I'd change:

1. Don't provide styles for .fixedsticky-off-transition-bottom or make the container support top and bottom padding. See also Container doesn't support padding #35.
2. Don't hide the dummy for either of the transition cases.

[christianhaller]

+1

[jonnyhaynes]

@zachleat Can this be merged into the master branch at some point? Seems to work well, or at least it did until issue #100

[RafaelPlantard]

@zachleat any idea of when we will see this merged?

[nicktobolski]

This is still an issue for me. It's disappearing at the bottom of my containing element in chrome 55 on OS X. My sticky element is tall-ish (height:651px;).

@zachleat Is there a workaround I can use in the meantime? I'm happy to try and make a PR if need be.