Mobile Navbar not Changing on scroll - php

Question

So I downloaded a wordpress theme today, to be met with the fact that the navbar doesn't seem to change to white on mobile scrolling down only on desktop (Site URL www.genzoid.com) I've been trying tirelessly for hours to try to fix this issue. Could anyone help? This is the code in my header.js
;(function($){
$(document).scroll(function(){
if ($(this).scrollTop() > 50) {
$('.navbar').removeClass('navbar-dark');
$('.navbar').addClass('navbar-light');
$('.navbar').removeClass('bg-transparent');
$('.navbar').addClass('bg-white');
$('.site-title').addClass('text-dark');
$('.navbar .cta.btn-outline-success').addClass('text-dark');
$('.navbar').addClass('border-bottom');
} else {
$('.navbar').removeClass('navbar-light');
$('.navbar').addClass('navbar-dark');
$('.navbar').removeClass('bg-white');
$('.navbar').addClass('bg-transparent');
$('.site-title').removeClass('text-dark');
$('.navbar .cta.btn-outline-success').removeClass('text-dark');
$('.navbar').removeClass('border-bottom');
}
});
})(jQuery);

Answer 1

I hope this example I created helps.
$(function() {
$(document).scroll(function(event){
var st = $(this).scrollTop();
if (st > 50){
$('#navbar').addClass('navbar-dark');
} else {
$('#navbar').removeClass('navbar-dark');
}
});
});
html, body {
margin: 0;
}
body {
height: 2000px;
}
.navbar {
background-color: red;
padding: 20px;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.navbar.navbar-dark {
background-color: black;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="navbar" class="navbar">My navbar</div>