Code doesn't work while having element fixed and animated

Custom code
1

hey there!

I’m not experienced in code injection topics, and have one question.
So I want to

  • have a menu (which is fixed above pages),
  • menu with a blurred background (which i made with code and data id)
  • but i also want this menu to appear not from the beginning, but from second page. So i added animation on scroll (opacity 0-100 with delay).

The problem is as soon as i add animation, background blur stop working. Can somebody help me with it?

Thanks,
Dima

2

if you have an animation set up sometimes the right div to apply your filter/mixblendmode/etc changes and you have to aplly it to the parent of it to work properly.
maybe this is the problem in your case too.

3

Well, I double checked it. So the div class with element properties and data id (but this is the only element having here a data id) is nested inside div class - animation container, and then in div - above pages container. None of the parents dont have data id

4

yeah, you have to adress the “animation-container” in which the data-id is nested.
This can only been done with javascript/jquery as you cannot adress a parent of an element with pure css.
The code would look like this:

$('[data-id=5fae6b223d68dd0072bd3a28]').parent().css({"color":"red"});