window.scroll() 函数故障 - 滚动标题隐藏和显示

Question

我正在尝试在网站滚动时缩小网站标题中徽标的主桌面版本。一旦滚动到某个点，我想完全隐藏主桌面导航栏和徽标，而是在粘性标题中显示一个包含较小滚动徽标和导航的不同 div。这工作得很好，问题是在 Windows 10 上的 Chrome 中，当我向上滚动时，有时我无法一直滚动到顶部并让全尺寸徽标和主导航回到视图中.我的代码感觉肯定是矫枉过正，我确信必须有一种方法来简化我在这里尝试做的事情。有人介意给我一些关于实现此类目标的最佳实践和最简单方法的建议吗？

这是我当前的 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

更新：我发现了一种基于 this answer 和 @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();

现在效果很好！