Javascript o Jquery: Desplácese a la posición fija div

Question

Quiero un html div que se desplazará cuando el usuario se desplace hacia abajo de la página y que llegue a la posición fija cuando termine la etiqueta principal. Por ejemplo: - Vea este enlace http://www.9gag.com/ tienen muchas publicaciones en una página. Cuando desplazamos una publicación y vamos al final de la primera publicación, los botones de título y compartir se convierten en una posición fija y luego la segunda publicación hace lo mismo y lo mismo para las siguientes publicaciones. Exactamente así. ¿Cómo podemos hacer esto en Jquery o javascript sin formato o en CSS?

Answer 1

$(window).scrollTop() le dará la cantidad de píxeles desplazados hacia abajo en el navegador, $('postcontainer').offset() le dará las posiciones x, y de un contenedor de correos.

Así que si enlaza un evento a $(window).scroll() o al desplazamiento del ratón, puede verificar si el contenedor offset().top es menor que el window.scrollTop. Si es así, empiezas a mover el artículo hacia abajo en relación con el contenedor de correos. Al hacer esto, necesita realizar un seguimiento de la altura del contenedor de correos y la altura del elemento móvil para asegurarse de que no baje más allá del fondo del contenedor.

Entonces, si postcontainer.height - movingelement.position().top >= movingelement.height() necesita corregir la posición del elemento móvil. Haz lo opuesto mientras te desplazas hacia arriba.

Espero que esto te haga pensar y comenzar a expulsar un poco de código.

Answer 2

Tal vez usted quiere probar este plugin: http://labs.anthonygarand.com/sticky/ pegajosa es un plugin de jQuery que proporciona la capacidad de hacer cualquier elemento en su página permanecer siempre visibles, haciendo que el elemento que se ha flotado cuando se ha alcanzado el límite.

Answer 3

Esta es la solución a su problema con una propiedad CSS simple.

utilice position:sticky para seguir el desplazamiento.

Aquí está el artículo explicado.

http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit

y vieja manera de hacer esto demo

con sticky position demo