Allow Stickybits scroll event to be bound to elements besides window for Internet Explorer (or `useStickyClasses`) about stickybits HOT 11 CLOSED

Hey, thanks for getting back to me so quickly.

I didn't realize that it'd default to fixed. That explains quite a bit to me.

As for your questions

• Currently we're only really supporting desktop browsers, so mobile isn't too much an issue.
• The modal is already existing in the app at the moment. I thought get a quick UX win by adding sticky functionality. However, it seems like we might be re-designing it in the near future. So it might not be necessary.

All things considered, it seems like you're right. Stickybits probably isn't the solution I'm looking for. I was secretly hoping there was some javascript magic under the hood to polyfill what I needed. But I understand that that's really difficult.

However, if I'm looking at doing something a bit less complicated where sticky stuff makes sense, I'll definitely drop by again.

Thanks for your help!

from stickybits.

@ssbyoung I have an idea to support your request. https://codepen.io/yowainwright/pen/EXzJeb

I changed window to #modal so the scroll event is attached to #modal. It is a minimal enhancement. I'm going to add it.

Thanks for pointing this issue out!!! 🙌

from stickybits.

Thanks for sharing your issue @ssbyoung ! I'll look into it as soon as possible.

from stickybits.

From my 👀 : IE doesn't support position: sticky so Stickybits defaults to position: fixed. The <element> that is supposed to be sticky would be set to fixed if it wasn't within a fixed element. 😢 As fixed <elements> are fixed relative to the browser window the second fixed item doesn't work.

Sorry if I'm not being clear. This is pretty complex!

I have a few questions:

• Is the modal you're making visible on devices?
• not meant to sound rude—why is the modal so complex? Like, what's the use case?

I'm asking these things because I'm leaning towards a custom solution. If possible, I'd like to help write something for this but I'm leaning towards saying Stickybits isn't a one stop shop for the problem you shared. I won't leave you hanging though! 🙌

from stickybits.

@ssbyoung do you have time to help me out and see if my un-published in npm version works for you in IE?!!! 🙏

from stickybits.

@yowainwright sure, I can take a look. I'll get in contact with you

from stickybits.

@ssbyoung I had to update variable calculations in 2 places = working on it. 🤘

from stickybits.

@ssbyoung The calculations have been updated. I'm going to make a codepen and test before publishing in NPM—feel free to grab the code from GH /dist if you want to test drive.

from stickybits.

@ssbyoung still not perfect in IE with a custom scrollEl. We're getting closer though.

from stickybits.

@ssbyoung Stickybits is as good as it can get w/ the known issue of a fixed element within a fixed element.

From the updates that were made, I'd say that changing the margin-top of a position: relative parent element (the modal) on a scroll event could get the codepen you made close to what you might want. 😬

Thanks for the challenge. Please reach out w/ any ideas, etc.

from stickybits.

Hey man. Thanks for trying! I'll keep you up to date if I run into anything else!

from stickybits.