如何通过CSS实现粘性菜单触发时完整logo切换为对应首字母缩写效果

完全可以通过纯CSS实现你需要的效果，以下是两种兼容性高、易于维护的实现方案：

方案1：双DOM节点显隐控制（推荐） #

提前将完整logo文本和缩写文本写入HTML结构，通过CSS控制不同状态下的显隐，兼容性最好，无障碍体验更佳。

HTML示例 #

<div class="header">
  <a href="/" class="logo">
    <span class="logo-full">Four Word Site Name</span>
    <span class="logo-abbr">FWSN</span>
  </a>
  <!-- 其他导航菜单内容 -->
</div>

CSS示例 #

/* 默认状态：显示完整logo，隐藏缩写 */
.logo-abbr {
  display: none;
}

/* 粘性菜单激活状态：假设.header添加.sticky类代表粘性触发 */
.header.sticky .logo-full {
  display: none;
}
.header.sticky .logo-abbr {
  display: inline-block;
}

如果你使用原生position: sticky实现粘性效果，不需要额外加JS控制类，可以直接用:stuck伪类匹配粘性激活状态：

.header:stuck .logo-full {
  display: none;
}
.header:stuck .logo-abbr {
  display: inline-block;
}

方案2：单DOM节点属性映射实现 #

如果希望减少DOM节点，可以通过自定义属性存储缩写，粘性激活时用伪元素替换显示内容。

HTML示例 #

<div class="header">
  <a href="/" class="logo" data-abbr="FWSN">Four Word Site Name</a>
</div>

CSS示例 #

/* 粘性激活时隐藏原文本，显示伪元素内容 */
.header.sticky .logo {
  color: transparent;
  position: relative;
}
.header.sticky .logo::before {
  content: attr(data-abbr);
  position: absolute;
  left: 0;
  top: 0;
  color: inherit; /* 继承原logo文本颜色 */
}

补充：添加过渡动画 #

如果需要平滑切换效果，不要使用display控制显隐，改用opacity和visibility实现过渡：

.logo {
  position: relative;
}
.logo-full, .logo-abbr {
  transition: all 0.3s ease;
}
.logo-abbr {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  visibility: hidden;
}
.header.sticky .logo-full {
  opacity: 0;
  visibility: hidden;
}
.header.sticky .logo-abbr {
  opacity: 1;
  visibility: visible;
}

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