咨询：滚动页面时切换导航栏Logo图片的实现方法（含现有脚本）

嘿，我来帮你搞定这个滚动切换导航栏颜色和Logo的需求！结合你已有的代码，我整理了一套完整的实现方案，包括脚本、HTML和样式，让效果更流畅～

核心jQuery脚本 #

在你原有改变导航栏颜色的逻辑基础上，新增Logo切换的代码即可：

$(document).ready(function() {
  // 监听页面滚动事件
  $(window).scroll(function() {
    // 获取当前滚动距离
    var scrollDistance = $(this).scrollTop();
    
    // 设定滚动触发阈值（可根据你的页面布局调整数值）
    if (scrollDistance > 50) {
      // 切换导航栏为深色样式（你的原有逻辑）
      $('.navbar').addClass('navbar-dark').removeClass('navbar-light');
      
      // 替换Logo为深色版本
      $('.logo').attr('src', 'img/logo-dark.png');
    } else {
      // 恢复导航栏为浅色样式
      $('.navbar').removeClass('navbar-dark').addClass('navbar-light');
      
      // 恢复原有的浅色Logo（记得替换成你实际的初始Logo路径）
      $('.logo').attr('src', 'img/logo-light.png');
    }
  });
  
  // 页面加载时主动触发一次滚动判断，避免刷新页面时状态异常
  $(window).trigger('scroll');
});

导航栏Logo对应的HTML代码 #

确保你的Logo图片带有logo类，方便jQuery定位：

<nav class="navbar navbar-light">
  <a class="navbar-brand" href="/">
    <!-- 初始显示浅色Logo，路径根据你的实际情况调整 -->
    <img src="img/logo-light.png" alt="网站Logo" class="logo">
  </a>
  <!-- 其他导航菜单内容 -->
</nav>

配套的style.less样式 #

添加过渡动画让切换更自然，同时定义导航栏的两种状态样式：

.navbar {
  // 给导航栏颜色切换添加过渡动画
  transition: background-color 0.3s ease;
  
  // 初始浅色导航栏样式
  &.navbar-light {
    background-color: #ffffff;
    color: #333333;
    // 其他浅色导航栏的样式（比如文字颜色、内边距等）
  }
  
  // 滚动后的深色导航栏样式
  &.navbar-dark {
    background-color: #2d3748;
    color: #ffffff;
    // 其他深色导航栏的样式
  }
}

.logo {
  // 给Logo切换添加透明度过渡，避免生硬切换
  transition: opacity 0.3s ease;
  width: 120px; // 根据你的Logo尺寸调整
  height: auto;
}

几个实用小提示 #

• 调整触发阈值：代码中的50是滚动触发切换的像素值，你可以根据导航栏的高度、页面布局，改成更适合的数值（比如100px）
• 路径检查：确保logo-dark.png和初始Logo都在img文件夹下，路径和代码中的一致，避免图片加载失败
• 初始状态校准：添加$(window).trigger('scroll')是为了处理页面刷新时不在顶部的情况，确保导航栏和Logo状态正确
• 动画优化：过渡动画的时长（0.3s）可以根据需求调整，数值越大动画越慢，越小则越快

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