Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Floated elements with relative positioning #44

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

Lab43
Copy link

@Lab43 Lab43 commented Mar 31, 2014

Since 72350ac the css position value of the sticky element is being applied to the spacer div. This causes problems if the sticky element has a position of 'relative' and is floated.

Demo: http://jsfiddle.net/eusonic/j5LHW/1/

When the sticky element bottoms out and is given position: absolute; bottom: 0px; it will be positioned relative to the spacer div, when it should be positioned relative to its original container. This causes the sticky element to suddenly jump up to its original position when you reach the bottom of the scrolling area.

The problem only occurs when the sticky element is floated because otherwise it isn't inside of the spacer div.

My proposed fix is to only apply the sticky element's position value to the spacer if it is absolute. Consider the possible position values:

  • Static: This is the default, so there's no need to apply it to the spacer.
  • Relative: This creates the problem described above. I can't think of a situation where the spacer div would need relative positioning.
  • Absolute: This should be applied to the spacer div.
  • Fixed: If someone has added fixed positioning to a sticky element they clearly don't understand what Sticky-Kit does.

@rroblik
Copy link

rroblik commented Jun 20, 2014

One more thing @eusonic

don't apply relative positioning to spacer

The spacer div should be positioned relative to the parent container
(include the parent manually specified via option : { parent : item })
So the inline style position:relative is added to parent : it's ok

But if the DOM parent of the spacer (not the option : parent DOM item) also have a relative positioning set via css, then at the bottom of the parent container scrolling (when sticky_kit:bottom is triggered), the sticky element "disappear".
(Not really disappear but display out of viewport in some case, because spacer have a fixed height equal to the original sticky item height, so position bottom:0 not working good in this case.)

So the workaround for me is :

  • Do not add position:relative (or remove it while stickying ?) on spacer if the option parent is not the same as the true DOM parent (parent())
  • Remove position:relative in our css on items which will be stick-it-ed (not so good...)

What you think about it ?

@Lab43
Copy link
Author

Lab43 commented Jun 21, 2014

I can't quite follow your explanation, and it's been a while since I've used Sticky-Kit. Can you make a jsfiddle that shows a situation where the spacer div needs to be relative position?

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

Successfully merging this pull request may close these issues.

None yet

2 participants