Estou com uma div que contem varias listas (uls) de um box, em cada box tem uma imagem e uma descrição. estou implementando um rolamento infinito para cima da seguinte forma:
- O usuario acessa uma pagina especifica (ex pagina 6), cada pagina tem 5 uls.
- quando a pagina é rolada para cima uma nova pagina é carregada por ajax, trazendo mais 5 uls e sendo inserida no html por um prepend.
Antes do carregamento a primeira ul tinha a id 'ul30', depois do carregamento a primeira ul tem a id 'ul25'.
Quando dou o prepend a pagina rola a tela até a ul25. Como posso fazer para manter a posição original (ul30)?
*Obs: tentei fazer uma animação usando o $().animate() no final do success do ajax para a ul30, mas como os box tem imagens, que demoram um pouco pra carregar, a posição passada para o animate ainda não é a posição final (o browser ainda está montando a pagina) então fica em uma posição entre a ul25 e a ul30
*Obs2: não posso botar um tamanho fixo para as imagens via css, mesmo tendo um padrão de tamanho de imagens cadastradas (estas podem vir a ter o tamanho alterado posteriormente)
[EDIT]
Em exemplo da implementação que quero fazer é o facebook, quado está na timeline e novas historias são carregadas, não é alterada a posição da tela, mas um conteúdo html é inserido no inicio do elemento da timeline.