Question

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

请分享您的观点。

此致 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

您可以通过$(document).width()和$(document).height()
您可以通过$(document).scrollTop()和$(document).scrollLeft
结合 1 和 2 ，可以计算视口矩形的位置
您可以使用$(element).offset()，$(element).width()和$(element).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);

Answer 3

让我们看看我是否理解得很好。你有一个足够长的页面可以滚动，并且有一个元素，当它出现在视口中时，你想用它做一些事情。因此，元素进入视口时确定触发的唯一事件是“滚动”。因此，如果元素位于页面上且滚动位于视口上，则需要执行的操作是将操作绑定到scroll事件，以在每次触发事件时检查元素是否在视图中。非常喜欢这样：

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

现在，为了让您知道元素是否在视口中，您需要3件事。该元素的偏移顶部，视口的大小和窗口的滚动顶部。应该看起来像这样：

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
   }
}

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

注意：我刚刚在五分钟内完成了这项工作，因此您可能需要修复其中一些内容，但这会让您对正在发生的事情有一个很好的了解;）

随意发表评论并提出问题

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

3 个答案: