¿Cómo hacer que div se desplace hacia abajo con una página una vez que llegue a la parte superior de la página?

Question

Sé que el título es un poco confuso; D, pero básicamente lo que quiero hacer se muestra claramente en este sitio web http://9gag.com desplácese hacia abajo y preste atención a la barra lateral, hay 2 anuncios una vez que el segundo anuncio aparece en la parte superior de la página. una página.

Me gustaría saber cómo hacer esto? Las soluciones html/css o jQuery están prefabricadas.

Answer 1

Como señala Kevin, lo que debe hacer es escuchar el evento scroll del documento. Cuando se active, querrá ver el valor de scrollTop.

$(document).scroll(function() { 

    var useFixedSidebar = $(document).scrollTop() >= myThresholdValue; 
    $('.my-sidebar-items').toggleClass('fixed', useFixedSidebar); 

}); 

Y tu CSS sería básicamente el siguiente aspecto:

.my-sidebar-items.fixedSidebar { position: fixed; } 

Un factor de complicación es que es probable que desee los elementos que se fijan en sus nuevas posiciones, los mejores, y que querría haga algo como esto:

.my-sidebar-items.fixedSidebar { position: fixed; top: 0 } 

Sin embargo, eso probablemente apilaría sus artículos uno encima del otro. Una solución para eso sería poner la clase fixedSidebar en un contenedor y usar la clase como se describe.

Demo

Answer 2

Se podría utilizar las barras adhesivas http://archive.plugins.jquery.com/plugin-tags/sticky o jQuery waypoints http://imakewebthings.github.com/jquery-waypoints/