Skip to content

Top value removed duing js-is-stuck class is added when useStickyClasses: true is used #163

@djphan

Description

@djphan

Describe the bug
I noticed that the top value of the sticky element is removed when you enable useStickyClasses. This unintuitive because if you just use the default stickybits, the top value (even if it is 0px) remains. What happens when you cross the threshold is that the sticky element jumps to the starting position of the element. This creates some visual issues that would normally not be there with just sticky.

To Reproduce
Example code pen here: https://codepen.io/djphan91/pen/MWjawJL

Expected behavior
I would expect that if you enable stickyClasses that the top value is not removed and the position sticky + top css is consistent with the default use of the stickybits init call.

Ideally I'd like to use the classes to track the state of the sticky element but if the class changes come with css inline style changes then that is undocumented or unintended behaviour.

Desktop (please complete the following information):

  • OS: MacOS
  • Browser Chrome
  • Version Version 86.0.4240.198 (Official Build) (x86_64)

Additional context
You can take my code pen and remove the useStickyClasses values and see the difference when comparing the UX behaviour of my sticky element with and without the behaviour.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions