I’m trying to apply a background color on scroll to my header, but I have a light and dark variant of my header component. Seems like there’s no way to set the target class on the interaction to only apply to a specific variant. Am I missing something or could this be added in the future?
I don’t think I’ve tried this scenario specifically however it makes sense that it would not work.
Component variants change the selector context for CSS styling overrides, but that would also affect how interactions locate and bind to elements. I haven’t seen any interactions changes that support this, but you could try creating the interaction while editing the component master. If the interaction shows the on-white variant indicator that’s a positive indicator.
You might be able to solve it by constructing your component like this;
DIV - component
DIV - .navbar.default
DIV - .navbar.on-white .my-interaction
This is ugly and messy, but you’d have two copies of your navbar inside of your component. One would only show on the default component, the other only on the variant.
That second one would also have a special class here I’ve called it my-interaction- which your interaction would be tied to. Thus the interaction can bind at page load, but you can assign different interaction setups to each variant.
Very messy, but it can work.
The only other way I can think of solving this is a hack-
- Page loads
- You have a custom script to identify e.g. on-white Navbar elements
- You add your own class on top of that, which is the one that interactions is configured to affect
- You reset IX2 so that it can re-bind
This would work for element-level interactions but the reset often causes side -effects especially for page level interactions that started automatically at page load. Unfortunately there’s no way in IX2 to reset individual interactions.