jQuery多条件判断问题：不同页面尺寸下Logo滚动缩放失效

你的核心问题在于屏幕宽度的判断逻辑顺序错误：小尺寸屏幕（比如<767px）会同时满足window.innerWidth < 767、window.innerWidth < 1260、window.innerWidth < 1320这三个条件，后面的样式设置会直接覆盖前面的，导致小屏幕的自定义样式完全失效。

另外代码里还有一些可以优化的地方，比如重复的jQuery调用、多次设置css属性，下面是修正后的完整代码：

$(document).ready(function() {
  var logo = $('.hkb_header_logo img');
  var menuHeight = $('nav.navbar').height();
  var menuTop = $('#hkb_menu').offset().top;

  $(document).scroll(function() {
    var scrollTop = $(this).scrollTop();
    var menuOffset = Math.max(menuTop - menuHeight, 0); // 替代原有的if判断

    if (scrollTop > menuTop) {
      // 滚动到菜单区域下方时的Logo样式，宽度判断从大到小用else if
      if (window.innerWidth >= 1320) {
        logo.css({
          'height': '55%',
          'width': '55%',
          'margin-top': '0px'
        });
      } else if (window.innerWidth >= 1260) {
        logo.css({
          'height': '85%',
          'width': '85%',
          'margin-top': '-150px'
        });
      } else if (window.innerWidth >= 767) {
        logo.css({
          'height': '70%',
          'width': '70%',
          'margin-top': '0px'
        });
      } else {
        logo.css({
          'height': '60%',
          'width': '60%',
          'margin-top': '-100px'
        });
      }
    } else if (scrollTop <= menuOffset) {
      // 回到顶部区域时恢复Logo样式
      if (window.innerWidth >= 1320) {
        logo.css({
          'height': '100%',
          'width': '100%',
          'margin-top': '0px'
        });
      } else if (window.innerWidth >= 1260) {
        logo.css({
          'height': '85%',
          'width': '85%',
          'margin-top': '0px'
        });
      } else if (window.innerWidth >= 767) {
        logo.css({
          'height': '70%',
          'width': '70%',
          'margin-top': '0px'
        });
      } else {
        logo.css({
          'height': '60%',
          'width': '60%',
          'margin-top': '0px'
        });
      }
    }
  });
});

关键修正说明 #

1. 调整宽度判断顺序：从最大的宽度阈值开始判断，用else if串联，确保每个屏幕尺寸只会匹配一个条件，避免样式被后续判断覆盖
2. 优化jQuery写法：
   • 直接使用缓存的logo变量，避免重复调用jQuery(logo)
   • 用对象形式一次性设置多个css属性，代码更简洁高效
3. 简化menuOffset计算：用Math.max()替代原有的if判断，直接确保数值不小于0

内容的提问来源于stack exchange，提问作者majan