Blur background div on scroll

How can I use CSS to blur a div on scroll? 

On my website, I have a header "Aaron Wu designs digital products...." which stays fixed as a user scrolls. As a user scrolls, I want the subsequent following text to become blurred behind the header. I've tried using backdrop-filter CSS, but it's not working, perhaps because I am using a fixed/sticky section. 

Website: here

Try adding this in addition to your other Custom CSS:

[data-section-id="644751937fb20441e7461ffd"] {
   .page-section .section-border {
      background-color: rgba(255,255,255,0);
      opacity: 0;
   }
}

7 hours ago, Ziggy said:

Try adding this in addition to your other Custom CSS:

[data-section-id="644751937fb20441e7461ffd"] {
   .page-section .section-border {
      background-color: rgba(255,255,255,0);
      opacity: 0;
   }
}

Thank you for the reply 🙂

Unfortunately, it still isn't working for me. 

Right now, here's the code I'm using: 

section[data-section-id="644751937fb20441e7461ffd"] {
  background-color: rgba(255, 255, 255, 0.5)!important;
  backdrop-filter: blur(10px)!important;
}

[data-section-id="644751937fb20441e7461ffd"] {
   .page-section .section-border {
      background-color: rgba(255,255,255,0)!important;
      opacity: 0!important;
   }
}

Drat, that's a shame! I'm not sure why that's not working, it's not easy to troubleshoot remotely, I could probably help more with access to your website.