Como poner un Widget estático.

Hola a todos

Esta vez quiero pedirles su ayuda con algo que necesito, haber si alguien sabe hacerlo.

Como se le hace para poner un Widget estático? que al hacer scroll el widget se mantenga en la posición (que baje conforme hagan scroll).

Asi como lo tiene este sitio: 9GAG - Just For Fun
Como pueden ver, al hacer scroll para abajo la publicidad sigue bajando y siempre esta visible.

esejoker468 dijo:

Hola a todos

Esta vez quiero pedirles su ayuda con algo que necesito, haber si alguien sabe hacerlo.

Como se le hace para poner un Widget estático? que al hacer scroll el widget se mantenga en la posición (que baje conforme hagan scroll).

Asi como lo tiene este sitio: 9GAG - Just For Fun
Como pueden ver, al hacer scroll para abajo la publicidad sigue bajando y siempre esta visible.

Click para expandir ...

Interesante saber esta técnica, haber quien puede orientarnos un poco.

Bueno, después de soltar una burrada y poner el siguiente ejemplo:

Es fácil:

Primero cargas el jQuery

Código:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

Después en otro script o en el mismo código HTML (no recomendable) añades la función:

HTML:

/*esperamos a que cargue el dom*/
$( document ).ready(function() {
/*llamamos a la función, a los 100px de hacer scroll fijamos el div al top*/
(function($) {
$(document).scroll(function() {
$('#cabecerafija').toggle($(this).scrollTop() > 100);
});

Click para expandir ...

Me quedé pensándolo, volví a revisarlo y dije; ¿pero que cojones? :facepalm:, lo primero está incompleto y lo segundo, la función .toggle() lo que hace es mostrar o esconder un elemento, por lo que vale, en el caso de arriba, para que el elemento #cabecerafija se muestre o esconda (según este definido en su CSS) al hacer un scroll de 100px.

Así que me he pegado un repaso por las funciones de jQuery que necesitaba y los amigos de stackoverflow y he creado lo siguiente, que digamos no muy bueno, pero sirve: Descarga

Hay más maneras de hacerlo y mucho mejores, pero hasta ahí no llego... también hay plugins para esto como http://mojotech.github.io/stickymojo/

Cualquier cosilla me decís a ver que puedo hacer

lobogris dijo:

editando

Click para expandir ...

Esperando . . . :qmeparto:

Novato dijo:

Esperando . . . :qmeparto:

Click para expandir ...

Ya está xD