Change Logo Scrolling Navbar - Materialize?

I hope someone can help me, I would like the scroll of the navbar to change the image of the logo. I am a novice but stubborn I tried online to look for something similar but for

Solution 1:

What about trying this jQuery approach? I've made a clean snippet that shows how you can change your image based on scroll with jQuery. This should be able to help you out.

$(document).ready(function() {
  $(window).on("scroll", function() {
    if($(this).scrollTop() >= 30){
      // set to new image
      $(".brand-logo img").attr("src","http://placekitten.com/300/300");
    } else {
      //back to default
      $(".brand-logo img").attr("src","http://placekitten.com/200/200");
    }
  })
})

nav {
  position: fixed;
}

.brand-logoimg {
  height: 200px;
  width: 200px;
}

.filler {
  background: pink;
  height: 500px;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><nav><ahref="#!"class="brand-logo"><imgsrc="http://placekitten.com/200/200"></a></nav><divclass="filler"></div>

Solution 2:

In questo modo funziona.

 <script>   $(document).scroll(function() {

  if ($(this).scrollTop() >=30) {

    $("#navbar .brand-logo").html("<img src='img/edizioni-white.png'>");
	} else {

    $("#navbar .brand-logo").html("<img src='img/edizioni-black.png'>");
  }

});
</script>