求助：JavaScript滚动触发Section边框变色功能异常问题

原代码存在的问题 #

1. 每次点击导航按钮都会给window新增一个scroll事件监听器，导致重复触发逻辑，且只有被点击过的Section才会进入样式判断流程
2. 直接通过element.style修改样式，不利于维护和样式扩展
3. 滚动监听逻辑绑定在点击事件内，导致未点击过的导航对应的Section永远不会触发样式变化

修正方案 #

第一步：用CSS类管理样式（替代直接修改行内样式）

/* 默认Section样式 */
.section {
  border: 2px solid black;
  margin: 20px 0;
  padding: 20px;
  transition: border-color 0.3s ease; /* 添加过渡动画，效果更丝滑 */
}

/* 高亮样式 */
.section-highlight {
  border-color: yellow;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
}

第二步：重构JavaScript逻辑

// 获取所有Section元素（需给每个Section添加class="section"）
const sections = document.querySelectorAll('.section');

// 全局滚动处理函数：遍历所有Section判断是否需要高亮
function handleScroll() {
  sections.forEach((section, index) => {
    const rect = section.getBoundingClientRect();
    let position = rect.top;
    
    // 第四个Section（索引从0开始，对应secNum=4）特殊处理偏移
    if (index === 3) {
      position = rect.top - 177;
    }
    
    // 判断是否在目标可视范围内，添加/移除高亮类
    if (position >= 0 && position <= 250) {
      section.classList.add('section-highlight');
    } else {
      section.classList.remove('section-highlight');
    }
  });
}

// 仅绑定一次滚动事件，避免重复监听
window.addEventListener('scroll', handleScroll);

// 页面加载时执行一次，初始化当前可视区域的Section样式
handleScroll();

// 导航点击函数：仅负责平滑滚动到目标Section
function myFunction(secNum) {
  const element = document.getElementById(`section${secNum}`);
  element.scrollIntoView({ behavior: 'smooth' });
}

第三步：调整HTML结构

给每个Section添加统一的类名：

<section id="section1" class="section">Section 1 内容</section>
<section id="section2" class="section">Section 2 内容</section>
<section id="section3" class="section">Section 3 内容</section>
<section id="section4" class="section">Section 4 内容</section>

核心优化点 #

• 全局仅绑定一次滚动监听，每次滚动时统一处理所有Section的样式状态
• 用CSS类控制样式，便于后续修改和维护
• 页面加载时初始化样式，确保初始状态正确
• 点击函数只保留滚动逻辑，职责单一

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