Callback function OR body class? about stickybits HOT 7 CLOSED

This is currently not supported, but if you create a top level overlay element with appropriate size of page and use 'pointer-events: none', and place your sticky inside that, it will be constrained as normal but inject the classes higher.

from stickybits.

Your use case sounds a lot like mine - using the library to trigger animations or reflow of content on scroll only and not so much for polyfill?

from stickybits.

Thanks. I'm probably over complicating things but, yes, your use case does sound similar. The polyfill is a bonus.

I have a couple of fixed global elements (a logo in the top left and a menu hamburger icon in top right) and a nav bar that sits at the bottom of the window on page load. I want the nav bar to become sticky when it hits the top and the global elements become 'part' of the nav bar by changing in colour and size (using CSS transitions).

As I need to know when js-is-sticky is applied to the nav bar I'm not sure how your suggestion would help?

from stickybits.

I may be an idiot. I can simply move my fixed elements to within the nav bar. I'll try that first!

from stickybits.

I see, that's difficult! I'm not sure that this is possible (as I understand your explanation) without some javascript shimming, sorry.

This would have been a good application of the :has css selector that is not yet finalized, as you'd be able to do something like .parent:has(.js-is-sticky) > .ele2 { ... } . If you find a polyfill/shim for :has you may be able to do this elegantly, something like

https://www.ericponto.com/blog/2015/01/10/has-pseudo-class-parent-selector/

from stickybits.

If you don't need your header elements to flow relative to body content (i.e. you know their initial top position offsets or whatever), you can maybe put overflow: visible on one parent container that encompasses the entire page with the pointer-events: none trick, and then stickybits/style each sticky nav element individually as it becomes stuck into the header on scroll.

I think it sounds like you're trying to have content headers flow into the nav though?

from stickybits.

I hadn't heard of :has. Pity support is non-existent: http://caniuse.com/#search=%3Ahas. As you say, a polyfill for :has would be useful.

Regardless, I solved my problem by simply moving my fixed elements into the nav bar.

Thanks for your time and advice!

from stickybits.