Cómo fijar unos divs en pantalla.

RoNiK

Quiero hacer algo que he visto en bastantes webs y me parece interesante. Para daros un claro ejemplo y no dar muchas vueltas, en 9gag.com cuando bajas el scroll se puede ver como una parte del sidebar se queda fijada.

Pues quiero hacer exactamente eso. Que en la mitad de mi sidebar se quede fijado como el suyo. He mirado y no consigo ver como se hace.

A ver si alguno me echa una mano.

RaymaN

position: fixed;

1 respuesta
RoNiK

#2 sabía que alguno me iba a decir eso xD. Según he mirado ellos no lo hacen así, o eso creo. He mirado algo de su css pero no veo nada de fixed, pero sin embargo no consigo ver como lo hacen.

No sé xD. A parte si no me equivoco con position:fixed lo dejo fijado en un punto de la pantalla. Pero si te fijas en 9gag no está siempre en el mismo punto de la pantalla ese div. Al principio está abajo y según bajas el scroll se acaba quedando fijado en la pantalla para que aunque vayas bajando siempre veas esa parte del sidebar.

1 respuesta
RaymaN

Edit: vale, ya vi lo que comentas, pensé que era el header. Supongo que será JS.

http://stackoverflow.com/questions/8608281/how-to-make-div-scroll-down-with-a-page-once-it-reaches-top-of-page

1 respuesta
mal3kith

#3 Es con fixed pero se pone con javascript cuando bajas el scroll, media vida tambien lo tiene y es así, esta semana lo he hecho en 2 webs es una tonteria, solo es calcular cuando quieres que cambiar a fixed y ya esta

1 respuesta
RoNiK

#5 Será una tontería para ti, para mi lamentablemente no xD. Pero bueno al menos ya sé que no es algo hecho sólo con html.

kodeone

También puedes poner un div dentro de otro y al contenedor le das un tamaño fijo. Al de dentro sólo le das el ancho fijo y el de dentro con css overflow:scroll.

ejemplo: http://www.w3schools.com/cssref/playit.asp?filename=playcss_overflow&preval=scroll

Luego ya jugar con el css para que quede bonito.

RoNiK

He estado mirando #4 pero soy muy torpe y no tengo grandes conocimientos en esto.

Más o menos he seguido los pasos de la demo que ha puesto en una de las respuestas

http://jsfiddle.net/jPxEY/

Pero

$(document).scroll(function() {

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

});

este código no sé donde ponerlo xD.

Edit: Supongo que va en el mismo <head> con sus etiquetas <script> pero nada no lo consigo hacer funcionar xD

Usuarios habituales

  • RoNiK
  • kodeone
  • mal3kith
  • RaymaN