How to enable and disable script on tablet when rotating

Question

I have an conditional script that is activated when inner width is less than 981px. It works well, except when I rotate a tablet I need to refresh before the script resets (enabled in portrait and disabled in landscape). How can I make this an automatic adjustment?

Thanks, Paul

<script>
 document.addEventListener("DOMContentLoaded", function () {
  if (window.innerWidth < 981) {
  var topPosition = 0;
  var globalHeaderSection = document.getElementById(
    "global-header-section",
  );

  window.addEventListener("scroll", function () {
    var scrollMovement = window.pageYOffset;

    if (topPosition < 200) {
      // do nothing
    } else {
      if (scrollMovement > topPosition) {
        globalHeaderSection.classList.remove("show-header");
        globalHeaderSection.classList.add("hide-header");
      } else {
        globalHeaderSection.classList.remove("hide-header");

 globalHeaderSection.classList.add("show-header");
      }
    }
    topPosition = scrollMovement;
  });
}
});
</script>