How to make Viewport (jQuery plugin) work on a container that is not the browser window?

First of all, excuse my bad english...

I managed to fit the question in the topic, but here it goes again in more detail. I started using a jQuery plugin, that adds a few selectors like :in-viewport, :below-the-fold, etc. It all works great, but unfortunatelly it only takes the browser window as a viewport. Is there any way to modify it to tell me when an element enters the viewport of a div with overflow: hidden. ?

Heres a link to the plugins main page: http://www.appelsiini.net/projects/viewport

Please... help!

EDIT: Providing a link to the exact case: http://mewe.wworks.pl/ The issue i开发者_运维百科s with the menu and scroller at the bottom, when an element with id='life' scrolls into the viewport it throws an active class on a corresponding menu item. that works, but it does it as soon as the div#life scrolls into the browser window, not the div itself.

Hope that makes sense..

EDIT2:

The final goal is to set the Active class on the life 'li' tag when #life goes half the way up through the jspPane. right now it gets the class as soon as #life enters the browser window (while its still below jspPane, somewhere under the footer)

I added some more text to the first article, and changed articles backgrounds to red to make it a bit easier to spot everything.. I think i messed up the whole code in general couse its acting real weird right now. Ive spent hours trying to sort this out with no luck...

As much as it would make me a happy person to see this code work in the end, a good alternative that gives the same effect would be great aswell... Thanks in advance!

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 :)

I'm not familiar with the plugin but try $("#myDiv:in-viewport"). Be sure to give the div you want an id="myDiv"