如何为手风琴（accordion）添加粘性定位（sticky）/取消粘性定位的切换功能

嗨，我来帮你搞定这个手风琴粘性切换的需求！其实核心思路很简单——我们通过一个全局的开关类来控制粘性CSS是否生效，再配合一个切换按钮触发类的添加/移除就可以了。下面是具体的实现步骤和完整代码：

1. 准备切换开关的HTML #

先在页面里加一个直观的切换开关，用复选框+标签就能快速实现：

<!-- 粘性切换开关 -->
<div class="sticky-toggle">
  <input type="checkbox" id="stickySwitch">
  <label for="stickySwitch">启用手风琴粘性定位</label>
</div>

2. 修改CSS规则，让粘性效果依赖开关类 #

把你原来的粘性CSS改成只有当页面存在sticky-enabled类时才生效，这样我们就能通过开关控制这个类的存在，间接开关粘性效果：

/* 只有当body有sticky-enabled类时，激活的手风琴才会应用粘性定位 */
body.sticky-enabled .accordion.active {
  position: sticky;
  top: 2%;
  /* 可以加个阴影和背景色，让粘性的手风琴更显眼 */
  background-color: white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* 给切换开关加个简单样式，提升体验 */
.sticky-toggle {
  margin: 1.5rem 0;
  font-size: 1rem;
}
#stickySwitch {
  width: 1.2rem;
  height: 1.2rem;
  margin-right: 0.6rem;
}

3. 编写JS逻辑，绑定开关的切换事件 #

在你现有的手风琴JS代码后面，加上监听开关变化的逻辑，用来动态添加/移除sticky-enabled类：

// 获取切换开关元素
const stickySwitch = document.getElementById('stickySwitch');

// 监听开关状态变化
stickySwitch.addEventListener('change', function() {
  // 根据开关勾选状态，给body添加或移除sticky-enabled类
  document.body.classList.toggle('sticky-enabled', this.checked);
});

4. 整合完整代码示例 #

这里把所有部分整合起来，你可以直接参考测试：

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 基础手风琴样式 */
    .accordion {
      border: 1px solid #ddd;
      margin-bottom: 1rem;
      padding: 1rem;
      cursor: pointer;
      border-radius: 4px;
    }
    .accordion-content {
      display: none;
      margin-top: 1rem;
      padding: 1rem;
      background-color: #f9f9f9;
      border-radius: 4px;
    }
    .accordion.active .accordion-content {
      display: block;
    }

    /* 粘性控制样式 */
    body.sticky-enabled .accordion.active {
      position: sticky;
      top: 2%;
      background-color: white;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }

    /* 切换开关样式 */
    .sticky-toggle {
      margin: 2rem;
      font-size: 1rem;
    }
    #stickySwitch {
      width: 1.2rem;
      height: 1.2rem;
    }
  </style>
</head>
<body>
  <!-- 粘性切换开关 -->
  <div class="sticky-toggle">
    <input type="checkbox" id="stickySwitch">
    <label for="stickySwitch">启用手风琴粘性定位</label>
  </div>

  <!-- 手风琴示例 -->
  <div class="accordion">
    手风琴标题1
    <div class="accordion-content">
      这是手风琴1的内容，很长很长的内容...<br>
      测试内容测试内容测试内容测试内容测试内容<br>
      测试内容测试内容测试内容测试内容测试内容<br>
      测试内容测试内容测试内容测试内容测试内容<br>
      测试内容测试内容测试内容测试内容测试内容<br>
    </div>
  </div>
  <div class="accordion">
    手风琴标题2
    <div class="accordion-content">
      这是手风琴2的内容，很长很长的内容...<br>
      测试内容测试内容测试内容测试内容测试内容<br>
      测试内容测试内容测试内容测试内容测试内容<br>
      测试内容测试内容测试内容测试内容测试内容<br>
      测试内容测试内容测试内容测试内容测试内容<br>
    </div>
  </div>
  <div class="accordion">
    手风琴标题3
    <div class="accordion-content">
      这是手风琴3的内容，很长很长的内容...<br>
      测试内容测试内容测试内容测试内容测试内容<br>
      测试内容测试内容测试内容测试内容测试内容<br>
      测试内容测试内容测试内容测试内容测试内容<br>
      测试内容测试内容测试内容测试内容测试内容<br>
    </div>
  </div>

  <script>
    // 手风琴开合逻辑（保留你原有的逻辑即可，这里是示例）
    const accordions = document.querySelectorAll('.accordion');
    accordions.forEach(accordion => {
      accordion.addEventListener('click', function() {
        // 可选：关闭其他已打开的手风琴（如果需要同时只打开一个）
        accordions.forEach(acc => {
          if (acc !== this) acc.classList.remove('active');
        });
        // 切换当前手风琴的激活状态
        this.classList.toggle('active');
      });
    });

    // 粘性切换逻辑
    const stickySwitch = document.getElementById('stickySwitch');
    stickySwitch.addEventListener('change', function() {
      document.body.classList.toggle('sticky-enabled', this.checked);
    });
  </script>
</body>
</html>

这个方案的好处是逻辑清晰，不会和你现有的手风琴代码冲突——我们没有直接修改手风琴的样式，而是通过全局类来控制粘性效果的开关，你还可以根据需求调整开关的样式，或者把sticky-enabled类加到手风琴的父容器上，效果是一样的。

备注：内容来源于stack exchange，提问作者Baa My