Sticky Element does not stick when within a scrollable div

[scion976]

I'm submitting a ...

• bug report
• [x ] feature request
• support request

If you're reporting a bug, please provide a minimal demonstration of the problem

When wrapped within an enclosing div with a max height and scrollbar the Sticky components no longer stick.

https://codesandbox.io/embed/react-sticky-sample-project-0yz7t

What is the current behavior?

The sticky component no longer sticks

What is the expected or desired behavior?

The sticky component sticks on scroll

Why do you want this? What use case do you have?

What is your environment?

• Version: 75.0.3770.100
• Browser: Chrome

Is there anything else I should know?

I believe the issue is that the sticky component does not capture the scroll events of the parent div which creates the scrollable area. Adding an additional (optional) prop taking in the ref of the parent should allow the component to bind to the parent's scroll event.

[xw-Zhou]

I have the same problem

[ifahrentholz]

Is it not possible for you to do something like this:
<StickyContainer style={{ maxHeight: "400px", overflowY: "auto" }}>
Basically instead of defining an extra div you use the SectionContainer component which will intern also render a div. You could also append a custom class with className..

This is what I did in my App and it's working great.