Container-based scroll

[sazemaster]

Hi, I was wondering if it's possible to make the plugin work when the sticky elements are inside a scrollable container instead of the body.

E.g. in a mobile app I'm creating, the nav bar is fixed at the top and the content container has position:fixed; top:44px;
The user scrolls the content in it, not the whole page. My sticky elements are inside this container.

Thanks,
Luca

[zachleat]

Are you sure you want to take this approach? It seems like you’re going to run into a lot of problems on mobile devices with overflow.

Regardless, I don’t think this is a use case we’re likely to want to support in the core library—sorry! If you’d like to discuss further please feel free to do so, but I’m going to close this ticket for now. Thanks!

[sazemaster]

Hi Zach, thanks for the answer. I am now curious regarding the problems with overflow you are mentioning, do you have any link to show?

It's a pity though because the native implementation of position: sticky; allows this use case and that's why I came here in the first place thiking that your polyfill had a bug :)

[zachleat]

Hmm, maybe I’m misunderstanding your use case? Can you whip up a quick demo on jsbin or something so I can see what you’re referencing?

[sazemaster]

Sure: http://jsfiddle.net/g4sRY/13/

Nav and content are fixed. I need to scroll the content, not the body.

Try it in Safari, you'll see it works!

[zachleat]

Ah, so I did a bit more research on this for #16 and I don’t think we’ll be polyfilling this case.

As a workaround, use position: fixed for your NAVIGATION header and use the normal page scrolling for your address book (remove the overflow). I think this will save you some headache later on anyway.

Good luck!

[OliverJAsh]

Do you know if any polyfills/fork of this polyfill implement this?