Эффективное определение текущей позиции элементов в верхней части страницы

Question

Цель моего проекта - сделать невозможной вертикальную прокрутку, как только указанный элемент c достигнет верхней части окна, затем содержимое этого элемента будет прокручиваться горизонтально, а затем возобновит вертикальную прокрутку после горизонтальной прокрутки. достиг конца Здесь я просто пытаюсь сделать первую часть реальностью (делая невозможной вертикальную прокрутку, как только указанный элемент c достигает верхней части окна). Однако у меня возникают проблемы с эффективным определением позиции прокрутки элемента в верхней части окна. Я определил, как получить текущее расстояние элемента от верхней части окна и проверить его текущее расстояние с помощью события прокрутки, но событие прокрутки, похоже, не срабатывает достаточно быстро. Если я прокручиваю медленно, он работает, как и ожидалось, но если я прокручиваю слишком быстро, он обнаруживает, что расстояние от элемента до верхней части окна слишком поздно «<= 0», и удаление вертикальной прокрутки происходит, когда элемент уже мимо вершины окна. Единственное, о чем я могу думать, - это увеличить частоту, с которой он проверяет текущее расстояние элемента от верхней части окна, но это может в конечном итоге отнять много вычислительной мощности. Ниже вы найдете мой Javascript и ссылку на мой Codepen. Если у кого-нибудь из вас есть решение этого или даже совершенно другого подхода к достижению моей цели, это будет очень цениться! </p>

Codepen: https://codepen.io/robertDD/pen/wvaJRYX

Javascript

  $(window).on('scroll',function() {
    var sliderPosCurr = $("#slider-wrap").offset().top - $(window).scrollTop(); // current position of top of slider from top of window

    if (sliderPosCurr <= 0) {
      $("html").css("overflow-y", "hidden");
    }

  });