单页网站汉堡菜单：不同区块打开时显示当前所在区块预览的JS实现

第一步：搭好基础的状态映射 #

• 给页面里的4个区块都设置唯一的ID标识，比如依次命名为section-1、section-2、section-3、section-4，保证每个区块可以被独立选中
• 在JS里提前存好每个区块对应的素材：比如每个区块的缩略预览图地址、对应导航的跳转链接，做成一一对应的映射表，避免后续零散取值

// 区块和预览内容的映射表
const sectionPreviewMap = {
  'section-1': { thumb: '首屏区块缩略图路径', target: '#section-1' },
  'section-2': { thumb: '第二区块缩略图路径', target: '#section-2' },
  'section-3': { thumb: '第三区块缩略图路径', target: '#section-3' },
  'section-4': { thumb: '第四区块缩略图路径', target: '#section-4' }
}

第二步：实时追踪当前所在的区块 #

• 不需要写复杂的位置计算逻辑，优先用浏览器原生的IntersectionObserverAPI实现轻量监听：设置当任意区块进入可视区域超过30%时，就把这个区块标记为“当前激活区块”，把对应的ID存在一个全局变量里
• 新手如果觉得API不好理解，也可以用最朴素的滚动监听方案：每次页面滚动时，计算每个区块的顶部距离页面顶部的偏移值，找到和当前滚动条位置差值最小、完全进入可视区的那个区块，更新成当前激活状态

注意：这个追踪逻辑要在页面加载完成后就持续运行，不要等点击汉堡菜单时才临时判断，不然会出现弹窗打开慢、匹配不准的问题

第三步：绑定菜单打开时的渲染逻辑 #

• 找到你现在汉堡菜单点击打开弹窗的那个事件处理函数，在弹窗内容渲染的最开头，先读取之前存好的“当前激活区块”的ID
• 拿着这个ID去之前做的映射表里找到对应的预览素材，把内容填充到弹窗的预览区域即可
• 如果你现在的弹窗已经提前写好了所有区块的预览DOM，只要在打开弹窗时做简单的显示/隐藏控制：把其他区块对应的预览元素加上display: none隐藏，把当前激活区块对应的预览元素显示出来就行，改动成本最低

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