Como chamo uma função em cada <li> quando eles estão próximos do topo da janela de visualização?

Question

Por favor ajude.Estou perdendo o sono por causa disso!:)

Tenho uma lista de postagens curtas;chame-os de citações, se quiser.Eu tenho um cabeçalho de posição fixa com 200px de altura e fundo transparente.Preciso que o cabeçalho fique visível para cada postagem que o usuário percorre (daí o posicionamento fixo) e gostaria que as postagens lidas desaparecessem (ou diminuíssem substancialmente em opacidade) quando fossem roladas para cima e atrás do cabeçalho;um inverso de "lazyload" com um pad de 200px, se preferir.É claro que se o usuário rolar na direção oposta para ter a postagem de volta na janela de visualização (e abaixo do cabeçalho), preciso que ela reapareça.

Sou bastante novo no jQuery, então tenha paciência comigo.Pesquisei extensivamente por ajuda e dicas, mas nenhuma solução ainda.Sua ajuda é sinceramente apreciada!

Brincar:

Página de teste

jQuery:

$(document).ready(function(){

  var headerheight = $('#header').height();
  var scrollposition = $(window).scrollTop();

    $(window).scroll(function(){

        var offset = .offset();

        $('li').each(function() {

            if(scrollposition <= $(this)offset.top-headerheight){

            // 
            $(this).fadeOut(400);
            // 

            } else {

            //
            $(this).fadeIn(400);
            //

            }
        });
    });
});

Answer 1

Entendi.Usei este plugin: http://imakewebthings.github.com/jquery-waypoints/

Answer 2

$(document).ready(function(){

    var headerheight = $('#header').height();

    $(window).scroll(function(){
        var scrollposition = $(window).scrollTop();

        $('li').each(function() {
            var obj = $('.test');

            if(scrollposition >= headerheight){

                if(obj.css('display') == 'none') {
                    $('.test').fadeIn(400);
                }

            } else {

                if(obj.css('display') == 'block') {
                    $('.test').fadeOut(400);
                }

            }
        });
    });
});

Houve algumas falhas e erros.Mas minha modificação deve resolver o problema.Como você está capturando a posição de rolagem apenas uma vez que ela nunca será atualizada.O que levaria a instruções if sempre indo para o lado errado :) Isso só fará com que a classe .test apareça ou desapareça se ela ainda não estiver aparecendo ou desaparecendo.

Experimente e me diga se funcionou :)

Lembre-se de que isso fará com que a classe .test apareça/desapareça se a posição de rolagem for maior ou igual à altura de #header -