Crear un recuadro flotante en jQuery usando la propiedad offset

Con jQuery tenemos la posibilidad de usar propiedades que no hay ni en css ni en javascript nativamente. Una de esas propiedades es la de offset(), la cuál nos permite saber la posición de un elemento relativo al sitio, cosa que no se puede hacer de ninguna otra forma, a menos que el objeto sea flotante y muestre explícitamente sus coordenadas.

Lo que vamos a hacer hoy en un recuadro flotante que te sigue conforme bajas la página, algo como algunos anuncios molestos que te siguen, o los recuadros donde ponen botones para compartir contenido.

Nivel del tutorial: Intermedio
Ver ejemplo del tutorial

HTML

Lo primero que tenemos que hacer es tener una capa que va a hacer de cuadro flotante. Para este tutorial hice otra capa en la cuál dentro lleva texto para que podamos hacer scroll a la página, pero no es necesario que ustedes lo hagan, el efecto servirá en su sitio siempre y cuando haya scroll.

CSS

Aquí configuramos los estilos tanto para la capa de texto como para el cuadro flotante. Fíjense que en este caso necesitamos que nuestro cuadro sea flotante para que lo podamos mover sin que altere la estructura del documento. El estilo del texto no es necesario que lo hagan.

jQuery

Por último agregamos el script que nos permite hacer funcionar el cuadro flotante. Lo que tenemos es que usamos la propiedad scrollTop para saber la posición del scroll, y la de offset para saber la del recuadro, entonces con un condicional las comparamos para saber si el recuadro ya no se ve en la pantalla. Si es verdadero movemos el recuadro, y si no lo dejamos intacto. Sencillo.

Si han hecho todo bien ya deberían ver su recuadro funcionando perfectamente. Cualquier duda o comentario no duden en dejármelo en los comentarios