Skip to content
This repository has been archived by the owner on Dec 15, 2018. It is now read-only.

elements disappear from view, rather than scroll out of view #28

Open
placenamehere opened this issue Jul 15, 2014 · 9 comments
Open

elements disappear from view, rather than scroll out of view #28

placenamehere opened this issue Jul 15, 2014 · 9 comments
Assignees

Comments

@placenamehere
Copy link

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
Copy link
Member

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
Copy link
Author

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 added a commit that referenced this issue Jul 29, 2014
@zachleat
Copy link
Member

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 zachleat self-assigned this Jul 29, 2014
@rap1ds
Copy link

rap1ds commented Nov 6, 2014

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

@hnrch02
Copy link

hnrch02 commented Jan 6, 2015

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
Copy link

+1

@jonnyhaynes
Copy link

@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
Copy link

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

@nicktobolski
Copy link

nicktobolski commented Dec 21, 2016

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

8 participants