如何使用JavaScript实现滚动时的Logo图片切换

嘿，这个需求很好解决，咱们可以在你现有的滚动监听代码基础上，轻松加上Logo切换的逻辑。下面给你两种常用的实现方式，你可以根据自己的HTML结构选一个：

方法1：直接修改图片的src属性 #

假设你的Logo是一个<img>标签，结构类似这样：

<img id="site-logo" src="black-logo.png" alt="网站Logo">

那你可以在滚动监听的代码里，根据滚动状态切换它的src属性：

$(window).on('scroll', function() {
  const hasScrolled = $(window).scrollTop() > 0;
  // 切换导航栏的black类
  $('nav').toggleClass('black', hasScrolled);
  
  // 获取Logo元素并切换图片
  const logoElement = $('#site-logo');
  if (hasScrolled) {
    logoElement.attr('src', 'white-logo.png');
  } else {
    logoElement.attr('src', 'black-logo.png');
  }
});

这个方法直接明了，适合用<img>标签承载Logo的场景。

方法2：用CSS类控制（更推荐） #

这种方法把样式和逻辑分离，后续维护起来更方便。比如你可以用一个<div>作为Logo容器，或者直接给<img>加类：

HTML结构 #

<div id="site-logo" class="logo"></div>

CSS样式 #

.logo {
  width: 100px; /* 替换成你的Logo实际宽度 */
  height: 40px; /* 替换成你的Logo实际高度 */
  background-image: url('black-logo.png');
  background-size: contain;
  background-repeat: no-repeat;
}

/* 当导航栏变为黑色时，自动切换Logo背景图 */
nav.black .logo {
  background-image: url('white-logo.png');
}

JavaScript代码 #

这时候你的JS代码甚至不用改太多，只需要保持原来切换black类的逻辑就行——CSS会自动处理Logo的切换：

$(window).on('scroll', function() {
  $('nav').toggleClass('black', $(window).scrollTop() > 0);
})

这种方法的好处是：不用在JS里硬编码图片路径，后续要换图片只需要修改CSS，而且性能更好，不需要频繁操作DOM属性。

小提醒：记得把代码里的图片路径换成你实际的文件路径哦，确保路径正确才能正常显示~

内容的提问来源于stack exchange，提问作者Máté Tóth