Проверить, отображается ли div в окне?

Вот все переменные, которые вам понадобятся...

var $myElt       = $('.myElement');      // whatever element you want to check
var $window      = $(window);            // the window jQuery element
var myTop        = $myElt.offset().top;  // the top (y) location of your element
var windowTop    = $window.scrollTop();           // the top of the window
var windowBottom = windowTop + $window.height();  // the bottom of the window

Затем, чтобы убедиться, что ваш элемент находится в пределах диапазона окна...

if (myTop > windowTop && myTop < windowBottom) {
    // element is in the window
} else {
    // element is NOT in the window
    // maybe use this to scroll... 
    // $('html, body').animate({scrollTop: myTop}, 300);
}

ссылка на jquery:

• http://api.jquery.com/offset/
• http://api.jquery.com/height/
• http://api.jquery.com/scrollTop/

Используйте $('#element').offset().top; для обнаружения верхней стороны элемента.

$(window).scrollTop(); для определения текущей позиции прокрутки.

И $(window).height(); для определения текущей высоты окна.

И после этих шагов вам на самом деле нужно только что-то легкое математические расчеты.

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}

источник: Проверить, виден ли элемент после прокрутки

см. следующий плагин lazyload:

http://plugins.jquery.com/files/jquery.lazyload.js__6.txt

раздел, который начинается с комментария «вернуть статус элемента относительно текущего представления», проверяет, виден ли элемент в области просмотра.

Если вы используете jQuery, просто попробуйте проверить позицию документа

$('html').position().top;

Например:

$(document).bind("scroll", checkLink);

function checkLink(){

   /* Position will checked out after 1 sec when user finish scrolling  */
   var s = setTimeout(function(){ 

     var docHeight = $('html').position().top;
     var allLinks = $('.navigation a');

     if ( docHeight < 0 && docHeight <= -1000 ) { 

        allLinks.removeClass('active');
        $('a.firstlink').addClass('active');

     } else 
     if ( docHeight < -1000 && docHeight <= -2000 ) { 

        allLinks.removeClass('active');
        $('a.secondlink').addClass('active');

     } else { /* .... */ }

   $(document).bind("scroll", checkLink);
   }, 1000);

  $(document).unbind('scroll');
}

но ребята в вашем примере давно этого не держались :) они просто переключают классы по клику

$('#navigation').localScroll();
    $('#navigation li a').click( function () {
        $('#navigation li a').removeClass("active");
        $(this).addClass("active");
    });