jquery + Scrolling + Check what element is visible

I would like to know if its possible with jQuery to do the following:

http://jsfiddle.net/AzFJR/2/

-check which ".main" is visible at the moment and dynamically add ".active" to the corresponding link in the "nav" ?

Regards!

Edit:

I have worked it out using this Viewport Plugin and following code:

//find what element is in view
var inview = '#' + $('.sectionSelector:in-viewport:first').attr('id'),

//find the corresponding link
$link = $('.mainNav li a').filter('[hash=' + inview + ']');

//check i its already active or not and if not
i开发者_JAVA技巧f ($link.length && !$link.is('.active')) {

    //remove all previous active links and make the current one active
    $('.mainNav li a').removeClass('active');
    $link.addClass('active');    

}

//Start same proccess on every scroll event again
$(window).scroll(function () {
    var inview = '#' + $('.sectionSelector:in-viewport:first').attr('id'),
    $link = $('.mainNav li a').filter('[hash=' + inview + ']');
    if ($link.length && !$link.is('.active')) {
        $('.mainNav li a').removeClass('active');
        $link.addClass('active');    
    }
});

Thanks every1 for the help!

Use the jQuery ELEMENT ‘INVIEW’ EVENT plugin.

$('div').bind('inview', function(event, isInView, visiblePartX, visiblePartY) {
  if (isInView) {
    // find link and addClass '.active'
  } else {
    // remove the class
  }
});

The scrollTo plugin should do the trick http://flesler.blogspot.com/2007/10/jqueryscrollto.html