JavaScript通过scrollPos添加类后CSS样式未正常显示问题

CSS类名严格区分大小写，你的代码存在类名拼写不匹配的问题：

• CSS中定义的高亮样式类为全小写的 .highlight
• 所有JavaScript的类增删操作里，全部错写为驼峰格式的 highLight（字母L大写）
  浏览器无法将你加到DOM上的highLight类和你写了边框样式的.highlight类关联，因此哪怕DevTools能看到类被添加，样式也不会生效。

• 将JavaScript代码中所有出现的highLight全部替换为全小写的highlight，保证和CSS类名完全一致。
  修复后的完整JS代码如下：

const highlightMenu = () => {
    const elem = document.querySelector('.highlight');
    const homeMenu = document.querySelector('#home-page');
    const aboutMenu = document.querySelector('#about-page');
    const servicesMenu = document.querySelector('#services-page');
    let scrollPos = window.scrollY;

    if(window.innerWidth > 960 && scrollPos < 600) {
        homeMenu.classList.add('highlight');
        aboutMenu.classList.remove('highlight');
        return;
    } else if (window.innerWidth > 960 && scrollPos < 1400) {
        aboutMenu.classList.add('highlight');
        homeMenu.classList.remove('highlight');
        servicesMenu.classList.remove('highlight');
        return;
    } else if (window.innerWidth > 960 && scrollPos < 2345) {
        servicesMenu.classList.add('highlight');
        aboutMenu.classList.remove('highlight');
        return;
    }

    if((elem && window.innerWidth < 960 && scrollPos < 600) || elem) {
        elem.classList.remove('highlight');
    }
}

window.addEventListener('scroll', highlightMenu);
window.addEventListener('click', highlightMenu);

• （可选优化）为了避免边框出现时导航项高度跳动，可以给导航链接默认加透明边框：

.navbar_links {
    /* 保留你原本写的.navbar_links其他样式，追加下面这行即可 */
    border-bottom: 4px solid transparent;
}
.highlight {
    border-bottom: 4px solid rgb(132,0,255);
}

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