jQuery导航栏滚动动画与CSS媒体查询的logo尺寸适配问题

这个问题我之前也碰到过——核心就是你在jQuery动画里硬编码了固定的Logo尺寸，但CSS媒体查询在1200px断点已经修改了Logo的默认大小，两者没有联动，导致滚动时的动画尺寸和响应式规则冲突，出现适配异常。

下面给你几个实用的解决方案，按推荐程度排序：

方案1：用CSS变量统一管理尺寸（最优雅，推荐） #

把所有Logo尺寸都交给CSS变量管理，媒体查询和滚动状态的样式完全联动，JS只负责切换状态类，逻辑更清晰：

首先修改CSS：

/* 定义全局变量，设置默认尺寸 */
:root {
  --logo-default-width: 180px; /* 替换成你原来的默认宽度 */
  --logo-default-height: 60px; /* 替换成你原来的默认高度 */
  --logo-scrolled-width: 120px; /* 滚动后缩小的宽度 */
  --logo-scrolled-height: 40px; /* 滚动后缩小的高度 */
}

/* 大屏幕下覆盖变量值 */
@media screen and (min-width: 1200px) {
  :root {
    --logo-default-width: 150px; /* 1200px+屏幕的默认宽度 */
    --logo-default-height: 50px; /* 1200px+屏幕的默认高度 */
    --logo-scrolled-width: 100px; /* 1200px+屏幕滚动后的宽度 */
    --logo-scrolled-height: 35px; /* 1200px+屏幕滚动后的高度 */
  }
}

/* Logo基础样式，用变量赋值，加上过渡动画 */
.navbar .logo {
  width: var(--logo-default-width);
  height: var(--logo-default-height);
  transition: all 0.3s ease; /* CSS过渡比jQuery animate更流畅 */
}

/* 滚动后的状态样式 */
.navbar.scrolled .logo {
  width: var(--logo-scrolled-width);
  height: var(--logo-scrolled-height);
}

然后简化jQuery代码，只负责切换scrolled类：

$(window).scroll(function() {
  const $navbar = $('.navbar');
  // 滚动阈值可以根据你的需求调整
  if ($(this).scrollTop() > 50) {
    $navbar.addClass('scrolled');
  } else {
    $navbar.removeClass('scrolled');
  }
});

方案2：动态获取当前Logo尺寸（适合不想大改CSS的场景） #

如果不想用CSS变量，可以在JS里动态获取媒体查询生效后的Logo尺寸，再按比例计算滚动后的大小，同时监听窗口resize事件更新尺寸：

// 初始化获取Logo默认尺寸
let defaultWidth = $('.navbar .logo').width();
let defaultHeight = $('.navbar .logo').height();
// 定义缩放比例，比如缩小到原尺寸的70%
const scaleRatio = 0.7;
let scrolledWidth = defaultWidth * scaleRatio;
let scrolledHeight = defaultHeight * scaleRatio;

// 窗口尺寸变化时重新计算尺寸
$(window).resize(function() {
  defaultWidth = $('.navbar .logo').width();
  defaultHeight = $('.navbar .logo').height();
  scrolledWidth = defaultWidth * scaleRatio;
  scrolledHeight = defaultHeight * scaleRatio;
});

// 滚动事件处理
$(window).scroll(function() {
  const $logo = $('.navbar .logo');
  if ($(this).scrollTop() > 50) {
    $logo.animate({
      width: scrolledWidth,
      height: scrolledHeight
    }, 300);
  } else {
    $logo.animate({
      width: defaultWidth,
      height: defaultHeight
    }, 300);
  }
});

方案3：纯CSS媒体查询控制滚动状态（简单场景适用） #

如果你的滚动逻辑很简单，也可以直接在媒体查询里单独定义大屏幕下的滚动状态样式，JS还是只负责切换类：

/* 默认状态样式 */
.navbar .logo {
  width: 180px;
  height: 60px;
  transition: all 0.3s ease;
}

/* 滚动后样式 */
.navbar.scrolled .logo {
  width: 120px;
  height: 40px;
}

/* 大屏幕下覆盖默认和滚动后样式 */
@media screen and (min-width: 1200px) {
  .navbar .logo {
    width: 150px;
    height: 50px;
  }
  .navbar.scrolled .logo {
    width: 100px;
    height: 35px;
  }
}

JS代码和方案1完全一样，只负责切换scrolled类即可。

总的来说，方案1是最优解——把样式逻辑完全放在CSS里，JS只处理状态切换，不仅避免了尺寸冲突，代码也更容易维护，后续要调整不同屏幕下的尺寸，直接修改CSS变量就行。

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