div que se mueve junto con el scroll en una misma posición con jquery

publicado por: Anonymous

Cree una aplicación de chat ahora tengo que implementarla en el sitio web, el diseño es similar al de Facebook pero quiero que cuando el usuario haga scroll el chat se mantenga estático, es decir que al bajar con el scroll se mantenga en esa misma posición al estilo Facebook, en realidad cuando se hace scroll esta bajando pero se mantiene en la misma posición esto es lo que busco, lo que logro actualmente es que baje al pie de pagina al hacer scroll, pero lo que busco es que se mantenga en esa misma posición cuando el usuario haga scroll similar en resumen al chat de Facebook.

_x000D_

_x000D_

var static_chat = jQuery("#masefic_chat_out");_x000D_
var position_chat = static_chat.offset().top;_x000D_
var page_position = jQuery(document).scrollTop();       _x000D_
jQuery(document).scroll(function(event){_x000D_
   var position_actually = jQuery(document).scrollTop();_x000D_
   if(position_actually>position_chat){_x000D_
   static_chat.animate({_x000D_
	   top: "+"+jQuery("#move_to").offset().top_x000D_
   },100);_x000D_
   }else if(page_position<position_actually||position_actualy===position_chat){_x000D_
   alert("test"); // TEST para saber cuando vuelve a la posición original_x000D_
   }_x000D_
   _x000D_
});

_x000D_

_x000D_

_x000D_

solución

Una mejor opción es utilizar el atributo position:fixed;, así te ahorras el trabajo de programarlo en Javascript. De esta manera sólo tendrías que agregar este atributo en el CSS al elemento que quieres mantener fijo en la pantalla, en este caso el contenedor del chat.

El CSS debería contener algo así:

#contenedorChat
{
    position: fixed;
}
Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *