克隆Spotify官网时，folder flips模块链接定位转换问题求助

我正在克隆Spotify官网，目前完成度约90%，但在第二个模块“folder flips”遇到技术问题。已实现标题堆叠效果，但当第三个标题堆叠至顶部时，所有链接需切换为position: relative。

现有代码如下：

const folderLinks = document.querySelectorAll(".folder-flip-link");

window.addEventListener("scroll", () => {
  if (folderLinks[folderLinks.length - 1].getBoundingClientRect().top <= 112) {
    folderLinks.forEach((link) => {
      link.style.position = "relative";
    });
  }
});

当前代码无法精准匹配官网的触发时机，硬编码的112值适配性差，且未处理反向滚动时的链接定位复原逻辑。

解决方案 #

1. 以第三个标题为触发基准：需求核心是“第三个标题堆叠至顶部”时切换，直接监听目标标题的位置比监听链接更准确
2. 动态计算临界值：避免硬写固定数值，结合页面固定导航栏高度（无固定导航则设为0）调整触发点
3. 添加节流优化性能：滚动事件触发频繁，节流可减少不必要的计算开销
4. 处理反向滚动复原：确保滚动回退时链接恢复原有定位属性

修改后的代码示例：

const folderLinks = document.querySelectorAll(".folder-flip-link");
const thirdHeading = document.querySelector(".folder-flip-heading:nth-child(3)");
// 根据实际页面布局调整导航栏高度，无固定导航则设为0
const navHeight = 80;

// 节流函数，控制事件触发频率
function throttle(func, delay = 100) {
  let timer = null;
  return function() {
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(this, arguments);
        timer = null;
      }, delay);
    }
  };
}

const handleScroll = throttle(() => {
  const headingRect = thirdHeading.getBoundingClientRect();
  // 当第三个标题顶部到达导航栏下方时触发定位切换
  const shouldSwitch = headingRect.top <= navHeight;
  
  folderLinks.forEach(link => {
    // 假设链接初始定位为absolute，可根据项目实际情况修改
    link.style.position = shouldSwitch ? "relative" : "absolute";
  });
});

window.addEventListener("scroll", handleScroll);

补充说明 #

• 若第三个标题的选择器不是.folder-flip-heading:nth-child(3)，请替换为你项目中的正确选择器
• 导航栏高度navHeight需根据页面实际布局调整，确保触发时机和官网完全匹配
• 节流函数的delay值可按需调整，平衡响应速度和性能消耗

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