Lay Theme Forum

Now I figured it out. DOnt know why it didnt work in the beginning. Added the blur filter and some transperancy with the rgba.

<script>
    jQuery(document).ready(function(){
      jQuery(window).scroll(function() { // check if scroll event happened
        if (jQuery(document).scrollTop() > 50) { // check if user scrolled more than 50 from top of the browser window
            jQuery(".navbar").css("background-color", "rgba(255, 255, 255, 0.4)"); // if yes, then change the color of class "navbar" to white (#ffffff) and 0.4 opacity
         // jQuery(".navbar").css("background-color", "#ffffff"); // if yes, then change the color of class "navbar" to white (#ffffff)
            jQuery(".navbar").css("backdrop-filter", "blur(5px)"); // if yes, then change the blur to 5px
        } else {
            jQuery(".navbar").css("background-color", "transparent"); // if not, change it back to transparent
            jQuery(".navbar").css("backdrop-filter", "blur(0px)"); // if yes, then change the blur to 0px

        }
      });
    });
</script>