滚动时Logo无法实现交叉淡入淡出，出现突然切换问题求解决

我懂你现在的困扰——滚动页面时Logo直接跳变，完全没有想要的柔滑交叉淡入（crossfade）效果对吧？问题出在你直接替换了<img>的src属性，这种方式只会让图片瞬间切换，fadeIn()只是显示已经换好的图，根本做不到过渡。咱们来调整代码，实现真正的交叉淡入淡出：

第一步：调整HTML结构 #

首先，把两个Logo都放在.smllogo容器里，一个是默认状态的Logo，一个是滚动后的Logo，初始时让滚动版隐藏：

<div class="smllogo">
  <img src="你的默认Logo地址" class="logo-default" alt="品牌Logo">
  <img src="http://beta.herringboneandsui.com/images/text-logo.svg" class="logo-scrolled" alt="品牌Logo" style="display: none;">
</div>

第二步：添加CSS让Logo叠加 #

为了让两个Logo完全重叠，不会出现位置偏移，给容器和图片加一点样式：

.smllogo {
  position: relative;
  /* 设置和你的Logo一致的宽高 */
  width: 150px;
  height: 50px;
}

.smllogo img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* 保持Logo比例 */
}

第三步：修改JavaScript逻辑 #

直接替换src的方式行不通，咱们要做的是控制两个Logo的淡入淡出，同时加上防抖避免滚动事件频繁触发导致卡顿：

$(function() {
  // 防抖函数：减少滚动事件触发频率，优化性能
  function debounce(func, delay) {
    let timeoutId;
    return function() {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => func.apply(this, arguments), delay);
    };
  }

  // 处理滚动逻辑的核心函数
  const handleScroll = debounce(function() {
    const scrollPosition = $(window).scrollTop();
    const $defaultLogo = $('.smllogo .logo-default');
    const $scrolledLogo = $('.smllogo .logo-scrolled');

    if (scrollPosition > 100) {
      // 调整菜单样式
      $('.wsmenu-list').css('margin', '5px auto');
      $('.megamenu').css('top', '60px');

      // 交叉淡入：默认Logo淡出后，滚动Logo淡入
      if ($defaultLogo.is(':visible')) {
        $defaultLogo.fadeOut('slow', () => {
          $scrolledLogo.fadeIn('slow');
        });
      }
    } else {
      // 恢复菜单样式
      $('.wsmenu-list').css('margin', '14px auto');
      $('.megamenu').css('top', '70px');

      // 交叉淡入：滚动Logo淡出后，默认Logo淡入
      if ($scrolledLogo.is(':visible')) {
        $scrolledLogo.fadeOut('slow', () => {
          $defaultLogo.fadeIn('slow');
        });
      }
    }
  }, 50); // 50ms的防抖间隔，可根据需求微调

  // 绑定滚动事件
  $(window).scroll(handleScroll);
});

为什么这样改？ #

• 两个Logo叠加在一起，通过控制fadeOut()和fadeIn()的顺序，实现真正的交叉过渡效果
• 防抖函数避免了滚动时事件频繁触发，让动画更流畅，也减少了不必要的DOM操作
• 每个状态切换前先判断当前显示的是哪个Logo，避免重复触发动画导致闪烁

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