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

我有一个问题，我有一组6个UL，有一个通用的x类。每个UL都由页面的一个特定部分组成。现在我有6个菜单与每个部分相关。我要做的是在用户视图中显示相关部分时突出显示菜单。 为此，我认为可能是jQueryposition（）或偏移量（）本可以帮助，但他们给出了元素的顶部和左侧。我也尝试使用jQueryviewport插件，但显然视图端口很大，一次可以显示多个UL，因此我无法在这里应用特定于元素的逻辑。我不熟悉这一点，但在滚动时会对元素进行任何更改吗？如果是，那么如何更改访问它

请分享你的观点

问候 希曼苏·夏尔马

您可以通过

$（document）.width（）和
$（document）.height（）获取视口的宽度和高度

您可以通过

$（document）.scrollTop（）和
$（document.scrollLeft）获取用户滚动的像素数

结合1和2，可以计算视口矩形的位置

可以使用

$（元素）.offset（）

，

$（元素）.width（）和
$（元素）.height（）获取元素的矩形

因此，留给您的唯一事情就是确定视口的矩形是否包含（或交互）元素的矩形

因此，整个代码可能如下所示：

/**
 * Check wether outer contains inner
 * You can change this logic to matches what you need
 */
function rectContains(outer, inner) {
    return outer.top <= inner.top &&
        outer.bottom >= inner.bottom &&
        outer.left <= inner.left &&
        outer.right >= inner.right;
}

/**
 * Use this function to find the menu related to <ul> element
 */
function findRelatedMenu(element) {
    return $('#menu-' + element.attr('id'));
}

function whenScroll() {
    var doc = $(document);
    var elem = $(element);
    var viewportRect = {
        top: doc.scrollTop(),
        left: doc.scrollLeft(),
        width: doc.width(),
        height: doc.height()
    };
    viewportRect.bottom = viewportRect.top + viewportRect.height;
    viewportRect.right = viewportRect.left + viewportRect.width;

    var elements = $('ul.your-class');
    for (var i = 0; i < elements.length; i++) {
        var elem = $(elements[i]);
        var elementRect = {
            top: elem.offset().top,
            left: elem.offset().left,
            width: elem.width(),
            height: elem.height()
        };
        elementRect.bottom = elementRect.top + elementRect.height;
        elementRect.right = elementRect.left + elementRect.width;

        if (rectContains(viewportRect, elementRect)) {
            findRelatedMenu(elem).addClass('highlight');
        }
    }
}

$(window).on('scroll', whenScroll);

/**
*检查外部是否包含内部
*您可以更改此逻辑以符合您的需要
*/
函数包含（外部、内部）{
返回外部.top=内部.bottom&&
外.左=内.右；
}
/**
*使用此功能查找与
元素相关的菜单
*/
函数findRelatedMenu（元素）{
返回$（'#menu-'+element.attr（'id'）；
}
函数whenScroll（）{
var doc=$（文档）；
变量元素=$（元素）；
var viewportRect={
top:doc.scrollTop（），
左：doc.scrollLeft（），
宽度：doc.width（），
高度：文件高度（）
};
viewportRect.bottom=viewportRect.top+viewportRect.height；
viewportRect.right=viewportRect.left+viewportRect.width；
var元素=$（'ul.your class'）；
对于（var i=0；i

使用jQuery和一个虚拟的固定HTML块可以很容易地找到视口的当前位置

$(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;
        }
    });     
})

查看一个工作示例：

---

您还可以使用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')
    }); 
})

---

让我们看看我是否理解得很好。你有一个足够长的页面可以滚动，并且有一个元素，当它出现在视口中时，你想用它做点什么。因此，在元素进入视口时，唯一确定触发的事件是“滚动”。因此，如果元素在页面上，而滚动在视口上，那么您需要做的是将一个操作绑定到滚动事件，以在每次触发事件时检查元素是否在视图中。大致如下：

$(window).scroll(function() {
   check_element_position();
});

function check_element_position() {
   var win = $(window);
   var window_height = win.height();
   var element = $(your_element);
   var elem_offset_top = element.offset().top;
   var elem_height = element.height();
   var win_scroll = win.scrollTop();
   var pseudo_offset = (elem_offset_top - win_scroll);
   if (pseudo_offset < window_height && pseudo_offset >= 0) {
      // element in view
   }
   else {
      // elem not in view
   }
}

现在，为了让您知道元素是否在视口中，您需要3件事。该元素的偏移顶部、视口的大小和窗口的滚动顶部。应该大致如下所示：

$(window).scroll(function() {
   check_element_position();
});

function check_element_position() {
   var win = $(window);
   var window_height = win.height();
   var element = $(your_element);
   var elem_offset_top = element.offset().top;
   var elem_height = element.height();
   var win_scroll = win.scrollTop();
   var pseudo_offset = (elem_offset_top - win_scroll);
   if (pseudo_offset < window_height && pseudo_offset >= 0) {
      // element in view
   }
   else {
      // elem not in view
   }
}

功能检查元素位置（）{
var win=$（窗口）；
var window_height=win.height（）；
var元素=$（您的元素）；
var elem_offset_top=element.offset（）.top；
var elem_height=element.height（）；
var win_scroll=win.scrollTop（）；
var pseudo_offset=（elem_offset_top-win_scroll）；
如果（伪偏移<窗高和伪偏移>=0）{
//视图中的元素
}
否则{
//不在视野之内
}
}

这里，（elem_offset_top-win_scroll）表示没有滚动的元素位置。像这样，您只需检查“元素偏移顶部”是否高于“窗口”视口，以查看它是否在视图中。 最后，您可以通过添加元素高度（其中已经有变量）来更精确地进行计算，因为我刚才所做的代码将触发事件，即使元素只有1个像素可见

注意：我只是在五分钟内完成了这项工作，所以您可能需要修复其中的一些问题，但这让您对正在发生的事情有了一个非常好的了解；）

---

请随意评论和提问

我会尝试一下，然后让您知道。为什么采用半模块化方法？我建议使用模块化或非模块化编程风格来排除混淆。既然可以在jQuery元素实例上使用jQuery.each（），为什么还要使用for循环呢？您可以使用“一”绑定（）改进第一个代码块。一个是事件绑定，而不是限制一个“每个”循环。你为什么不告诉我这个解决方案出了什么问题，或者你为什么不给我这个问题带来的好处？赏金很可能在未授予赏金的情况下过期，因此系统会自动授予一半。很抱歉，我没有时间重新开始。我可以在完成时授予剩余的赏金吗？非常满足您的注意。但我会在稍后的某个时间告诉您。如果它起作用，我会将赏金授予您。谢谢