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

发布于 2024-12-08 10:45:23 字数 839 浏览 0 评论 0原文

首先，请原谅我的英语不好......

我设法将问题纳入主题，但这里又更详细了。我开始使用 jQuery 插件，它添加了一些选择器，例如 :in-viewport、:below-the-fold 等。这一切都很好，但不幸的是它只将浏览器窗口作为视口。有没有办法修改它来告诉我当元素进入带有溢出：隐藏的div的视口时。？

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

请...帮忙！

编辑：提供确切案例的链接：http://mewe.wworks.pl/ 问题在于底部的菜单和滚动条，当 id='life' 的元素滚动到视口中时，它会在相应的菜单项上抛出一个活动类。这是可行的，但它会在 div#life 滚动到浏览器窗口中时立即执行，而不是 div 本身。

希望这是有道理的..

EDIT2：

最终目标是当 #life 穿过 jspPane 的一半时，在 life 'li' 标签上设置 Active 类。现在，只要 #life 进入浏览器窗口（虽然它仍在 jspPane 下方，页脚下方的某处），它就会获取该类。

我在第一篇文章中添加了更多文本，并将文章背景更改为红色，以便更容易阅读发现一切......我想我总体上搞砸了整个代码，因为它现在表现得很奇怪。我花了几个小时试图解决这个问题，但没有运气...

尽管看到这段代码最终工作会让我很高兴，但一个能提供相同效果的好的替代方案也很棒...谢谢进步！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

携余温的黄昏 2024-12-15 10:45:23

我开始自己搞乱它，然后我想出了一个非常简单的代码，可以满足我的需要。我将其放在下面，以防其他人需要类似的东西：

$('#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/位置/#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
}

};

希望有人会觉得这很有用:)

I started messing around with it a little bit on my own, and i came up with a pretty simple code that does what i needed. Ill put it up below in case anyone else needs something like that:

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

Some values are hardcoded in there, which isnt ideal, but it was the quick way to go.

Also this bit of code was quite helpful (found at: 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
}

};

Hope someone will find this usefull :)

回复收藏 0 原文