如何选择最靠近窗口顶部的元素？实现侧边栏滚动高亮功能

我明白你想要的是滚动页面时，侧边导航中对应当前视口内的区块链接自动高亮的效果，你的代码已经有了初步的判断逻辑，但还需要完善几个关键点（比如清除旧高亮、处理区块切换的边界情况），下面是完整的可运行方案：

完整代码实现 #

$(document).scroll(function(){
    // 缓存目标区块和导航链接，减少重复DOM查询提升性能
    const $allSections = $('section[id^="section"]');
    const $navLinks = $('a[href^="#section"]'); // 假设导航链接是锚点形式，比如href="#section1"

    // 先清除所有链接的高亮状态，避免多个链接同时高亮
    $navLinks.removeClass('highlight');

    $allSections.each(function(){
        const sectionTop = $(this).offset().top;
        const sectionHeight = $(this).outerHeight();
        const scrollTop = $(window).scrollTop();
        const windowHeight = $(window).height();

        // 判断当前区块是否处于视口的"有效高亮区域"（这里用视口上半部分到中间的位置，可按需调整阈值）
        const isInView = (sectionTop - scrollTop) <= windowHeight/2 && 
                         (sectionTop + sectionHeight - scrollTop) >= 0;

        if (isInView) {
            // 找到对应导航链接并添加高亮
            $navLinks.filter(`[href="#${this.id}"]`).addClass('highlight');
            // 找到第一个符合条件的区块后停止遍历，保证同一时间只高亮一个链接
            return false;
        }
    });
});

关键优化点说明 #

• 先清旧高亮：每次滚动时先移除所有链接的highlight类，这是你原来代码缺失的核心步骤，能避免多个链接同时高亮的混乱情况。
• DOM元素缓存：把区块和导航链接的查询结果缓存起来，避免滚动事件触发时重复查询DOM，提升页面流畅度。
• 更精准的视口判断：结合区块顶部位置和自身高度判断，确保区块确实进入视口范围才触发高亮，避免区块还没完全显示就提前高亮的问题。
• 提前终止遍历：找到第一个符合条件的区块后就停止循环，因为我们同一时间只需要高亮一个对应链接。

配套样式建议 #

别忘了给highlight类添加显眼的样式，比如：

.highlight {
    color: #ff4444;
    font-weight: bold;
    border-left: 3px solid #ff4444;
    padding-left: 8px;
}

额外提示 #

• 如果你的区块是动态加载的，记得在区块加载完成后重新绑定滚动事件，或者使用事件委托逻辑。
• 可以调整windowHeight/2这个阈值，比如改成windowHeight*0.3，让高亮触发的位置更符合你的使用习惯。

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