Shopify Dawn主题滚动时切换Logo的JavaScript实现方法问询

步骤1：确认Logo元素选择器 #

Dawn主题的Logo通常在section-header.liquid模板里，打开浏览器开发者工具（F12）定位Logo图片，记下它的类名（常见为.header__heading-logo）。

步骤2：添加JavaScript代码 #

有两种方式可以实现：

方式一：写入全局JS文件

打开主题的assets/global.js，在末尾插入以下代码：

document.addEventListener('DOMContentLoaded', () => {
  const headerLogo = document.querySelector('.header__heading-logo');
  const scrollTrigger = 100; // 触发切换的滚动距离（单位：px）
  const defaultLogo = '/cdn/shop/files/你的默认Logo地址.png';
  const scrolledLogo = '/cdn/shop/files/滚动后的Logo地址.png';

  window.addEventListener('scroll', () => {
    const scrollY = window.scrollY;

    if (scrollY > scrollTrigger) {
      if (headerLogo.src !== scrolledLogo) {
        headerLogo.src = scrolledLogo;
        headerLogo.alt = '滚动状态Logo'; // 可选：更新alt文本
      }
    } else {
      if (headerLogo.src !== defaultLogo) {
        headerLogo.src = defaultLogo;
        headerLogo.alt = '默认Logo';
      }
    }
  });
});

方式二：嵌入Header模板

打开section-header.liquid，在文件末尾添加<script>标签并放入上述代码。

关键注意事项 #

• 替换defaultLogo和scrolledLogo为你在Shopify后台上传的图片CDN地址（上传后可直接复制）。
• 如果你的Logo类名不是.header__heading-logo，修改querySelector中的选择器为实际类名。
• 调整scrollTrigger的值可以改变触发切换的滚动距离，按需修改即可。

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