title: My removeClass doesn't remove my AddClass when refreshed on lower resolution
body: <p>My issue is when i refresh it on desktop resolution, it worked but when i refresh the page on lower reso</p>
  <p><a href="https://i.stack.imgur.com/T9kUF.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/T9kUF.jpg" alt="enter image description here" /></a></p>
  <p>it should be like this <a href="https://i.stack.imgur.com/S7yON.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/S7yON.jpg" alt="enter image description here" /></a></p>
  <p>But my issue is this: <a href="https://i.stack.imgur.com/aQn5A.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aQn5A.jpg" alt="enter image description here" /></a></p>
  <p>The code is working but when you are in the lower reso, the removeClass is not working on removing the added class &quot;splash-search-hidden&quot;.</p>
  <pre><code>let $window = $(window);
  let siteHeader = $('.header-container');
  let headerHeight = siteHeader.outerHeight();   
  
  let $body = $('body');
  let $trendingQueries = $(&quot;.trending-queries&quot;);
  
  if( $trendingQueries.length ) {
      var topofDiv = $trendingQueries.offset().top; 
      var height = $trendingQueries.outerHeight(); 
  }
  else {
      $body.addClass(&quot;no-animation splash-search-hidden&quot;);
  }
  
  $window.scroll(function () {
      if ($(this).scrollTop() &gt; 0) {
          siteHeader.addClass(&quot;scroll&quot;);
      }
      else if ($(this).scrollTop() &lt; headerHeight) {
          siteHeader.removeClass(&quot;scroll&quot;);
      }
  
      if( $trendingQueries.length ) {
          if($(window).scrollTop() + headerHeight &gt; (topofDiv + height)){
            $body.addClass(&quot;splash-search-hidden&quot;);
          }
          else{
            $body.removeClass(&quot;splash-search-hidden&quot;);
          }
      }
  });
  </code></pre>