Question

首先，请原谅我糟糕的英语......

我设法在主题中适应了这个问题，但是在这里它会再次更详细。我开始使用jQuery插件，它添加了一些选择器，如：in-viewport，：under-the-fold等。这一切都很好，但不幸的是它只将浏览器窗口作为视口。是否有任何方法可以修改它以告诉我何时元素进入具有overflow：hidden的div的视口。？

这是插件主页的链接：http://www.appelsiini.net/projects/viewport

请......帮助！

编辑：提供指向具体案例的链接：http://mewe.wworks.pl/ 问题在于底部的菜单和滚动条，当id ='life'的元素滚动到视口中时，它会在相应的菜单项上抛出一个活动类。这是有效的，但只要div #life滚动到浏览器窗口，而不是div本身，它就会这样做。

希望有道理..

EDIT2：

最终目标是在#life通过jspPane的一半时，在生活'li'标签上设置Active类。现在，一旦#life进入浏览器窗口，它就会上课（虽然它仍然低于jspPane，在页脚下的某个地方）

我在第一篇文章中添加了更多文字，并将文章背景更改为红色，以便更容易发现所有内容。我认为我搞砸了整个代码，因为它的表现真的很奇怪。我花了好几个小时试图解决这个问题而没有运气......

尽管最终看到这段代码可以让我成为一个快乐的人，但是提供同样效果的好选择也会很棒... ...提前致谢！

Answer 1

我开始自己搞乱了一下，我想出了一个非常简单的代码来完成我需要的东西。如果其他人需要这样的东西，我会把它放在下面：

$('#main .Content').bind('scroll', function(event) {

    var offset;
    var position;
    var elementId;

    $('#main article').each(function(){
        offset = $(this).positionAncestor('#main .Content');
        position = $(this).positionAncestor('#main .Content');
        if(offset.top <= 135 && offset.top >= -($(this).height()-105)) {
            elementId = $(this).attr('id');
            $('#main nav li.Current').text(elementId);
            $('#main nav li.'+elementId).addClass('Active');
        }
        else { 
            $('#main nav li:not(.'+elementId+')').removeClass('Active');
        }
    });
});

有些值是硬编码的，这不是理想的，但这是快速的方法。

这段代码也非常有用（见http://api.jquery.com/position/#comment-42458111）

jQuery.fn.positionAncestor = function(selector) {
var left = 0;
var top = 0;
this.each(function(index, element) {
    // check if current element has an ancestor matching a selector
    // and that ancestor is positioned
    var $ancestor = $(this).closest(selector);
    if ($ancestor.length && $ancestor.css("position") !== "static") {
        var $child = $(this);
        var childMarginEdgeLeft = $child.offset().left - parseInt($child.css("marginLeft"), 10);
        var childMarginEdgeTop = $child.offset().top - parseInt($child.css("marginTop"), 10);
        var ancestorPaddingEdgeLeft = $ancestor.offset().left + parseInt($ancestor.css("borderLeftWidth"), 10);
        var ancestorPaddingEdgeTop = $ancestor.offset().top + parseInt($ancestor.css("borderTopWidth"), 10);
        left = childMarginEdgeLeft - ancestorPaddingEdgeLeft;
        top = childMarginEdgeTop - ancestorPaddingEdgeTop;
        // we have found the ancestor and computed the position
        // stop iterating
        return false;
    }
});
return {
    left:    left,
    top:    top
}

};

希望有人会发现这个有用：）

Answer 2

我不熟悉插件，但请尝试$("#myDiv:in-viewport")。一定要给你想要的div id="myDiv"

如何使Viewport（jQuery插件）在不是浏览器窗口的容器上工作？

2 个答案: