My removeClass doesn't remove my AddClass when refreshed on lower resolution

Question

My issue is when i refresh it on desktop resolution, it worked but when i refresh the page on lower reso

it should be like this

But my issue is this:

The code is working but when you are in the lower reso, the removeClass is not working on removing the added class "splash-search-hidden".

let $window = $(window);
let siteHeader = $('.header-container');
let headerHeight = siteHeader.outerHeight();   

let $body = $('body');
let $trendingQueries = $(".trending-queries");

if( $trendingQueries.length ) {
    var topofDiv = $trendingQueries.offset().top; 
    var height = $trendingQueries.outerHeight(); 
}
else {
    $body.addClass("no-animation splash-search-hidden");
}

$window.scroll(function () {
    if ($(this).scrollTop() > 0) {
        siteHeader.addClass("scroll");
    }
    else if ($(this).scrollTop() < headerHeight) {
        siteHeader.removeClass("scroll");
    }

    if( $trendingQueries.length ) {
        if($(window).scrollTop() + headerHeight > (topofDiv + height)){
          $body.addClass("splash-search-hidden");
        }
        else{
          $body.removeClass("splash-search-hidden");
        }
    }
});