jQuery的position()与offset()方法不生效，无法获取元素位置实现导航滚动变色

你代码中的核心问题是直接使用jQuery元素对象做数值比较：你声明的infopos、secpos变量存的是选中的DOM元素对应的jQuery实例，不是元素的垂直位置数值，和scrollTop的数值比较逻辑自然无法生效。

offset()方法本身是可靠的，只要确保在DOM和所有静态资源加载完成后调用即可，它返回的top属性就是元素相对于整个文档顶部的垂直偏移值，完全符合你的使用需求。
修正后的代码如下：

$(window).on('load', function(){ 
    window.loaded = true;
    console.log("LOADED");
});

// 可选：添加节流函数，避免scroll事件高频触发导致的性能损耗
function throttle(func, delay) {
    let timer = null;
    return function() {
        if (!timer) {
            timer = setTimeout(() => {
                func.apply(this, arguments);
                timer = null;
            }, delay);
        }
    }
}

$(window).scroll(throttle(function() {
    if (!window.loaded) return;
    const scrollTop = $(window).scrollTop();
    // 正确获取元素垂直偏移值
    const infopos = $("#info").offset().top;
    const secpos = $("#security").offset().top;

    if (scrollTop >= 0 && scrollTop < infopos - 25) {
        $("#navgeneral").addClass("active");
        $("#navinfo, #navsecurity").removeClass("active");
    } else if (scrollTop >= infopos && scrollTop < secpos) {
        $("#navinfo").addClass("active");
        $("#navgeneral, #navsecurity").removeClass("active");
    } else {
        // 补充超过security元素后的逻辑，按需调整
        $("#navsecurity").addClass("active");
        $("#navgeneral, #navinfo").removeClass("active");
    }
}, 100)); // 100ms节流间隔，可根据需求调整

如果offset()获取的数值仍不符合预期，可以排查以下场景：

• 页面存在异步渲染的内容（比如接口返回后才插入的DOM、懒加载的图片），在window.load触发时目标元素还没渲染完成，可以把获取偏移值的逻辑挪到scroll事件内部，每次触发时实时计算，或者在异步内容渲染完成后再更新偏移值变量
• 目标元素的父级设置了transform: translate等CSS属性，会影响offset()的计算结果，这种场景下可以改用原生的getBoundingClientRect()方法计算：$("#info")[0].getBoundingClientRect().top + scrollTop，得到的结果和offset().top是等价的

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