@Richard-Keith Hello! Thank you very much for your time and the references you showed me! Finally I managed to achieve what I was looking for! Here's the code I use if someone is interested on the same thing.
On custom <head> content:
<script>
jQuery(document).ready(function(){
jQuery(window).scroll(function() { // check if scroll event happened
if (jQuery(document).scrollTop() > 25) { // check if user scrolled more than 50 from top of the browser window
jQuery(".navbar").css("background-color", "#ffffff"); // if yes, then change the color of class "navbar" to white (#ffffff)
} else {
jQuery(".navbar").css("background-color", "transparent"); // if not, change it back to transparent
}
});
});
</script>
On custom CSS:
.navbar {
transition: background-color 200ms linear;
}
Also on the "Customize" section the navbar must be on opacity 0.
That's all! Thank you again for your help and have a good day! :D