Failure to stick properly in Chrome on 3rd child about stickybits HOT 5 CLOSED

I don't have access to anything older than IE 11. (well I have plenty of VMs but we tell our clients we don't support IE < 11)

I imagine IE 10 probably isn't too bad since it's not that different from 11. For supported Windows versions you only come across IE 10 if someone's running Windows Server 2012, since Windows 7, 8.1, 10 and Servers 2008 R2, 2012 R2 and 2016 all have IE 11 available. I guess if Windows 8.0 is still in support (??) then it too would be IE 10 only.

I'll keep you posted on anything else I find / fix.

from stickybits.

@IanYates, I will dig into the Codepens ASAP! Thanks for your detailed issue! 🙏

from stickybits.

@IanYates there were some minor tweaks I did with the codepen you shared. It appears that stickybits is working correctly and that we just need to modify the html and css slightly. 🙌

~Btw, thanks for pointing out that the codepens were out of date. I will update that asap.

Here's what I forked for your codepen: https://codepen.io/yowainwright/pen/VWrjVw
—Sorry, in advance, if the forked codepen I made is further from your visual goal.

One last quick note: each Stickybit is sticky relative to its <parent>. If all Stickybits are in the same <parent>, that will be an issue—not just with stickybits but with the css prop position: sticky. If you want <elements> to become sticky within 1 <parent> you might want to use position: fixed and leverage window on scroll to set them to fixed—this method has other problems though.

from stickybits.

Hi @yowainwright - thanks so much!

I am looking to have every Stickybit in the one scrolling region parent. The idea is that I've got a scrolling list of document pages (images) and want a header at the top of each image with some text and a couple of buttons, etc. Whilst the image is on-screen I want its heading to still be visible even though perhaps the top 50% of the of image has been scrolled out of view and the next image is partially visible (with its heading at the top of it part of the way down the viewport).

Your updated example seems to support this pretty well. I'll need to read up more on this to see what the pitfalls are. If it's just that the Stickybit <div> elements pile up at the top and sit underneath each other then I'm OK with that since visually it's still what I'm after.

I can see in Chrome it works amazingly well now. In IE it's a bit glitchy but I'll look into that more when I get some time later this week.

Thanks again!!

from stickybits.

@IanYates no prob! Thanks for the details. 🙌

I plan on tackling older IEs soonish. Let me know if you want to help w/ it ...?

from stickybits.