Why doesn't javascript work on a small screen resolution?

Question

JavaScript

var header = $("#header"),
  introH = $("#intro").innerHeight(),
  scrollOffset = $(window).scrollTop();

/* Fixed Header */
checkScroll(scrollOffset);

$(window).on("scroll", function () {
  scrollOffset = $(this).scrollTop();

  checkScroll(scrollOffset);
});

function checkScroll(scrollOffset) {
  if (scrollOffset >= introH) {
    header.addClass("fixed");
  } else {
    header.removeClass("fixed");
  }
}

Everything works, when you click on the About menu , a fixed header appears after the .intro block, but as soon as I turn on the adaptive , the height of the visible area decreases and the header appears much lower. How can this be fixed? https://varfolomeiq.github.io/mogo/

Answer 1

introH is calculated once when loading the script, you change the height resolution - introH remains at the initial value, calculate it every time anew in checkScroll