CSS Changes on header sticky?

How To
1

I’m experimenting to replicate a Divi feature that I miss and I’m failing. It allows for CSS changes when the header is sticky. It’s the same as CSS changes when :hover is used, but instead for when the header is sticky.

I want to be able to change the CSS of anything when the header sticks. When the user scrolls and the sticky header sticks #brx-header gains the scrolling class.

What I want to do for example is change the font colour, or image size etc for any element, by just adding the code in the CSS box.

I’ve looked at interactions, but find a way to utilise those and also attempted to use :has

1 Like
2

I’ve tried this and got nothing:

%root% {
	color: black;
}

#brx-header:has(.scrolling) ~ main %root% { 
  color: white;
}