javascript - 获取页面滚动上元素的坐标

Question

我遇到了这个问题，我有一组 6 个 UL，它们有一个共同的类 x。它们中的每一个都由页面的一个特定部分组成。现在我有 6 个菜单与每个部分相关。我是什么所要做的就是在相关部分在用户 View 中时突出显示菜单。为此，我认为可能是 jQuery position(); 或 offset(); 可能有所帮助，但它们给出了元素的顶部和左侧。我也尝试使用 jQuery viewport 插件，但显然 view port 很大，它一次可以显示多个 UL，因此我不能在这里应用元素特定的逻辑。我对此不熟悉，但是滚动时元素有什么变化吗？如果是那么如何访问它？

请分享您的观点。

问候希曼舒沙玛。

Answer 1

使用 jQuery 和一个虚拟的固定 HTML block 可以很容易地做到这一点，它可以帮助您找到视口(viewport)的当前位置。

$(window).on("scroll load",function(){  
    var once = true;
    $(".title").each(function(ele, index){
        if($(this).offset().top > $("#viewport_helper").offset().top && once){              
            var index = $(this).index(".title");
            $(".current").removeClass('current')        
            $("#menu li").eq(index).addClass('current')
            once = false;
        }
    });     
})

查看一个工作示例:http://jsfiddle.net/6c8Az/1/

---

您也可以使用 jQuery 插件和 :first 选择器做类似的事情:

$(window).on("scroll load",function(){  
    $(".title:in-viewport:first").each(function(){
        var index = $(this).index(".title");
        $(".current").removeClass('current')        
        $("#menu li").eq(index).addClass('current')
    }); 
})