глюк функции window.scroll () - скрытие и отображение прокрученного заголовка

Question

Я пытаюсь уменьшить основную настольную версию lo go в заголовке сайта при его прокрутке. Как только прокрутка достигает определенной точки, я хочу полностью скрыть основную панель навигации рабочего стола и lo go и вместо этого показать другой div, содержащий меньший прокручиваемый lo go и навигацию в липком заголовке. Это работает очень хорошо, проблема заключается в том, что в Chrome на Windows 10, когда я прокручиваю назад, я иногда не могу прокрутить до самого верха и получить полный размер lo go и главная навигация снова в поле зрения. Мой код кажется излишним, и я уверен, что должен быть способ упростить то, что я пытаюсь здесь сделать. Кто-нибудь не возражает дать мне несколько советов по наилучшей практике и простейшему способу достижения чего-то вроде этого?

Вот мой текущий код javascript / jQuery:

(function($){
    $(window).scroll(function() {
      
      if($(window).scrollTop() >= 86) {
        $('header.util').addClass('scrolled');
        $('#shopify-section-header > div:first-child').hide();
        $('#shopify-section-header').css('min-height','0');
        $('header.util .middle-wrapper').show().css("display", "inline-block");
      } else if($(window).scrollTop() >= 79) {
        $('header.util').removeClass('scrolled');
        $('#shopify-section-header header.site-header .logo-nav-contain .grid .grid__item.one-fifth').css('width','10%');
        $('header.site-header h1.site-logo.has-image a img').css('top','92px');
        $('#shopify-section-header').css('min-height','148px');
        $('#shopify-section-header > div:first-child').show();
        $('header.util .middle-wrapper').hide();
      } else if($(window).scrollTop() >= 72) {
        $('header.util').removeClass('scrolled');
        $('#shopify-section-header header.site-header .logo-nav-contain .grid .grid__item.one-fifth').css('width','11%');
        $('header.site-header h1.site-logo.has-image a img').css('top','84px');
        $('#shopify-section-header').css('min-height','148px');
        $('#shopify-section-header > div:first-child').show();
        $('header.util .middle-wrapper').hide();
      } else if($(window).scrollTop() >= 65) {
        $('header.util').removeClass('scrolled');
        $('#shopify-section-header header.site-header .logo-nav-contain .grid .grid__item.one-fifth').css('width','12%');
        $('header.site-header h1.site-logo.has-image a img').css('top','76px');
        $('#shopify-section-header').css('min-height','148px');
        $('#shopify-section-header > div:first-child').show();
        $('header.util .middle-wrapper').hide();
      } else if($(window).scrollTop() >= 58) {
        $('header.util').removeClass('scrolled');
        $('#shopify-section-header header.site-header .logo-nav-contain .grid .grid__item.one-fifth').css('width','13%');
        $('header.site-header h1.site-logo.has-image a img').css('top','69px');
        $('#shopify-section-header').css('min-height','148px');
        $('#shopify-section-header > div:first-child').show();
        $('header.util .middle-wrapper').hide();
      } else if($(window).scrollTop() >= 51) {
        $('header.util').removeClass('scrolled');
        $('#shopify-section-header header.site-header .logo-nav-contain .grid .grid__item.one-fifth').css('width','14%');
        $('header.site-header h1.site-logo.has-image a img').css('top','61px');
        $('#shopify-section-header').css('min-height','148px');
        $('#shopify-section-header > div:first-child').show();
        $('header.util .middle-wrapper').hide();
      } else if($(window).scrollTop() >= 44) {
        $('header.util').removeClass('scrolled');
        $('#shopify-section-header header.site-header .logo-nav-contain .grid .grid__item.one-fifth').css('width','15%');
        $('header.site-header h1.site-logo.has-image a img').css('top','54px');
        $('#shopify-section-header').css('min-height','148px');
        $('#shopify-section-header > div:first-child').show();
        $('header.util .middle-wrapper').hide();
      } else if($(window).scrollTop() >= 37) {
        $('header.util').removeClass('scrolled');
        $('#shopify-section-header header.site-header .logo-nav-contain .grid .grid__item.one-fifth').css('width','16%');
        $('header.site-header h1.site-logo.has-image a img').css('top','46px');
        $('#shopify-section-header').css('min-height','148px');
        $('#shopify-section-header > div:first-child').show();
        $('header.util .middle-wrapper').hide();
      } else if($(window).scrollTop() >= 30) {
        $('header.util').removeClass('scrolled');
        $('#shopify-section-header header.site-header .logo-nav-contain .grid .grid__item.one-fifth').css('width','17%');
        $('header.site-header h1.site-logo.has-image a img').css('top','38px');
        $('#shopify-section-header').css('min-height','148px');
        $('#shopify-section-header > div:first-child').show();
        $('header.util .middle-wrapper').hide();
      } else if($(window).scrollTop() >= 23) {
        $('header.util').removeClass('scrolled');
        $('#shopify-section-header header.site-header .logo-nav-contain .grid .grid__item.one-fifth').css('width','18%');
        $('header.site-header h1.site-logo.has-image a img').css('top','31px');
        $('#shopify-section-header').css('min-height','148px');
        $('#shopify-section-header > div:first-child').show();
        $('header.util .middle-wrapper').hide();
      } else if($(window).scrollTop() >= 14) {
        $('header.util').removeClass('scrolled');
        $('#shopify-section-header header.site-header .logo-nav-contain .grid .grid__item.one-fifth').css('width','19%');
        $('header.site-header h1.site-logo.has-image a img').css('top','23px');
        $('#shopify-section-header').css('min-height','148px');
        $('#shopify-section-header > div:first-child').show();
        $('header.util .middle-wrapper').hide();
      } else if($(window).scrollTop() <= 13){
        $('header.util').removeClass('scrolled');
        $('#shopify-section-header header.site-header .logo-nav-contain .grid .grid__item.one-fifth').css('width','20%');
        $('header.site-header h1.site-logo.has-image a img').css('top','14px');
        $('#shopify-section-header').css('min-height','148px');
        $('#shopify-section-header > div:first-child').show();
        $('header.util .middle-wrapper').hide();
      }
      
    });
})(jQuery);

Answer 1

ОБНОВЛЕНИЕ: я нашел другой подход на основе этого ответа от @raad.

Вот мой обновленный и упрощенный код:

logoSize = function() {
  // Get the real width of the logo image
  var theLogo = $("#mainLogo");
  var newImage = new Image();
  newImage.src = theLogo.attr("src");
  var imgWidth = newImage.width;
  var imgHeight = newImage.height;

  // distance over which zoom effect takes place
  var maxScrollDistance = 92;

  // set to window height if larger
  maxScrollDistance = Math.min(maxScrollDistance, $(window).height());

  // width at maximum zoom out (i.e. when window has scrolled maxScrollDistance)
  var widthAtMax = 365;

  // calculate diff and how many pixels to zoom per pixel scrolled
  var widthDiff = imgWidth - widthAtMax;
  var pixelsPerScroll = (widthDiff / maxScrollDistance);

  $(window).scroll(function() {
    
    // the currently scrolled-to position - max-out at maxScrollDistance
    var scrollTopPos = Math.min($(document).scrollTop(), maxScrollDistance);
    
    // how many pixels to adjust by
    var scrollChangePx = Math.floor(scrollTopPos * pixelsPerScroll);
    
    var windowTop = $(window).scrollTop();
    var mainTop = $('.main-content').offset().top;
    var headerTop = $('#shopify-section-header').offset().top;
    var distanceMain = mainTop - windowTop;
    var distanceHeader = headerTop - windowTop;
    var stickyHeight = $('#shopify-section-promos').outerHeight() + $('header.util').outerHeight();
    var imgOffset = stickyHeight + 14;
    var positionTop = imgOffset - distanceHeader;
    
    // calculate the new width
    var zoomedWidth = imgWidth + scrollChangePx;
    
    var halfWidth = zoomedWidth / 2;
    halfWidth = -halfWidth;

    // set the width
    $('.logo').css('width', zoomedWidth);
    $('#mainLogo').css({
      'top': positionTop,
      'left': '50%',
      'margin-left': halfWidth
    });
    
    if($(window).scrollTop() >= 86) {
      $('header.util').addClass('scrolled');
      $('#shopify-section-header > div:first-child').hide();
      $('#shopify-section-header').css('min-height','89px');
      $('header.util .middle-wrapper').show().css("display", "inline-block");
    } else {
      $('header.util').removeClass('scrolled');
      $('#shopify-section-header').css('min-height','148px');
      $('#shopify-section-header > div:first-child').show();
      $('header.util .middle-wrapper').hide();
    }
    
  });
}

logoSize();

Теперь это работает отлично!