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

Question

我有这个问题,我有一套6个UL有一个共同的类x.它们每个都包含一个页面的特定部分.现在我有6个与每个部分相关的菜单.我该怎么做当相关部分在用户视图中时突出显示菜单.为此,我认为可能是jQuery position(); 或offset(); 可能有帮助,但他们给了元素的顶部和左侧.我也尝试使用jQuery 视口插件,但显然视图端口很大,它可以一次显示多个UL因此我不能在这里应用元素特定的逻辑.我不是familiar对此,但滚动时元素的变化是什么？如果是,那么如何访问它？

请分享您的观点.

关心Himanshu Sharma.

Answer 1

使用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;
        }
    });     
})

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

您还可以使用jQuery插件和第一个选择器执行类似的操作:

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

Answer 2

1. $(document).width()您可以通过and获取视口的宽度和高度$(document).height()
2. $(document).scrollTop()您可以通过和获取用户滚动的像素数$(document).scrollLeft
3. 结合1和2，您可以计算出视口矩形的位置
4. $(element).offset()您可以使用,$(element).width()和获取元素的矩形$(element).height()
5. 因此，剩下的唯一一件事就是确定视口的矩形是否包含（或交互）元素的矩形

所以整个代码可能如下所示：

/**
 * 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);