captivationsoftware/react-sticky

Basic implementation not working

Closed this issue · 3 comments

brewern commented

I'm submitting a ...

  • bug report

Bug Demo

This is just a basic implementation that I cannot get working. As I scroll the fixed position increases a negative number, that doesn't seem right. The div spacer also shows a padding-bottom, I don't understand how that value is determined.

I'm trying to use this library in my app, I created the sandbox example since I was having an issue getting it to work.

  • Browser: Chrome MacOS (latest)
vcarl commented

The sticky container is only as big as the content in your example, fixed demo https://codesandbox.io/s/rypplz720p

shaneardell commented

Hi @vcarl Those two sandboxes behave exactly the same for me. What's the fix?

vcarl commented

Oh strange, I think my changes must not have saved? Sorry about that 😅 There are 2 problems: the left-column div exactly wraps its contents, and the StickyContainer is nested within that. Sticky elements will only stick within the extents of StickyContainer, so it's not working because the StickyContainer is less than 1 screen tall.

The fix I made was to set the containing div to display: flex, which has each column div extend to the full height, and to replace <div className="left-column"> with <StickyContainer className="left-column>".