[ curiosidade ] Noticias igual do TecMundo

[Wesley Santos 28]

Sempre achei interessante como a imagem fica nas noticias do site tecmundo quando você desce a pagina, exemplo:

 

 

http://www.tecmundo.com.br/xiaomi/82369-mi-band-pulseira-inteligente-xiaomi-chega-brasil-r-95.htm

 

 

Alguém sabe como que deixa assim?

[angelorubin 142]

Utilize jQuery.

 

Comece com uma div escondida (hide), ao rolar a pagina (scroll), faça a div surgir suavemente (slideDown) de cima para baixo.

 

Simples assim.

[Lucas Santos Brito 12]

Clique com o botão direito na imagem, e inspecione o elemento 'nzn-article-image-src'.

Depois role a página, e verá que uma nova classe é adicionada ('nzn-fixed').

 

O script seria algo do tipo:

$(function(){
	var elemento = '.elemento'; /* A classe da imagem ou elemento responsável pela img */
	$(window).scroll(function () {
        if ($(this).scrollTop() > 60) {
	    $(elemento).addClass('.classe-que-fixa');
        } else if ($(this).scrollTop() > 250 || $(this).scrollTop() <= 60) {
            $(elemento).removeClass('.classe-que-fixa');
        }
    });
})

Onde 60 e 250 se referem a altura da barra de rolagem, medidas relativas a sua necessidade, '.classe-que-fixa' e '.elemento' já são meio que auto explicativo.

Lembrando que a imagem ou elemento que irá fixar, deve estar contido dentro de um elemento com posicionamento relativo, caso contrário ele irá fixar no topo da tela.

 

Obs: Não testei a teoria nem o script, mas ainda que não estejam certos já da pra ter uma base.

 

Espero ter ajudado, abraços.