fixed-sticky icon indicating copy to clipboard operation
fixed-sticky copied to clipboard

elements disappear from view, rather than scroll out of view

Open placenamehere opened this issue 9 years ago • 9 comments

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?

placenamehere avatar Jul 15 '14 15:07 placenamehere

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.

zachleat avatar Jul 18 '14 15:07 zachleat

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

placenamehere avatar Jul 19 '14 21:07 placenamehere

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.

zachleat avatar Jul 29 '14 17:07 zachleat

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

rap1ds avatar Nov 06 '14 12:11 rap1ds

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 #35.
  2. Don't hide the dummy for either of the transition cases.

hnrch02 avatar Jan 06 '15 07:01 hnrch02

+1

christianhaller avatar Dec 09 '15 10:12 christianhaller

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

jonnyhaynes avatar Jun 23 '16 10:06 jonnyhaynes

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

RafaelPlantard avatar Nov 07 '16 00:11 RafaelPlantard

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.

nicktobolski avatar Dec 21 '16 15:12 nicktobolski