bajar contenedor junto con el scroll

zoloquoki · #1 (**permalink**) 27/10/2009, 10:44

Hola!

Estoy intentando que el contenedor flotante donde está incluido el menú despegable, baje automaticamente junto con el scroll del navegador.

En mi maquetación, dicho contenedor está justo debajo del encabezado, lo cual cuando bajas, la distancia del menú con la "barra de herramientas del navegador" está muy distanciado, lo que queria es que bajase justo cuando la "barra de herramientas del navegador" se tope con el menú y empiece a bajar automaticamente.

En mi css está así:

Código:

	   
    .thrColFixHdr #menuDespegable {
	float: left; 
	width: 160px; 
	background: #FFFFFF; 
	padding: 5px 0 5px 0;
	margin: 0 0 0 10px;
	position: fixed; 
    }

Hay algún codigo específico que haga funcionar con lo que me gustaría tener.

muchas gracias!!

cristian_cena · #2 (**permalink**) 27/10/2009, 12:27

Hola zoloquoki, sugerencia de amigo: no pidas codigos hechos porque no los encontrarás, pide ayudas y las tendrás y muchas. Aunque al preguntar debemos recortar lo más posible el problema a los fines de que no implique un mayor esfuerzo para quien responde que el que tu haces en preguntar. (como lo dice la muy clara firma de mikel). Postea siempre que puedas URLs para ilustrar el problema.

CITO="... baje automaticamente junto con el scroll del navegador." No entiendo, pero supongo que te refieres a algun efecto lograble con Jquery u otra libreria de javascript y no con CSS.

Saludos!

zoloquoki · #3 (**permalink**) 27/10/2009, 16:39

Cristian_cena, en parte tienes razón, y en la otra, creia que mi pregunta era clara a lo que queria exactamente. En cuanto a lo del "ejemplo", sé que siempre es mejor, porq leyendo solo el codigo sería dificil y más en ayudar,

.

Bueno, lo que queria es como veis en mi web que es (miweb.zxq.net). el contenedor izquierdo donde está el menu despegable, al bajar para leer la información, se va bajando también el contenedor que le he puesto en "fixed", pero no ha quedado como quiero, ya que cuando bajas, el contenedor va bajando a partir del encabezado, lo cual deja una distancia bastante grande entre el contenedor y las barras de herramientas del navegador.

Lo que quería era es que bajase el contenedor justo cuando la barra de herramienta tope con el contenedor y empiece a bajar automaticamente.

Pienso que no tendrá que ver con java script, sino con CSS.

Espero que haya aclarado mejor mi pregunta! muchas gracias!

un saludo!

cristian_cena · #4 (**permalink**) 27/10/2009, 16:58

Ahora entiendo tu problema, pero no lo sabria resolver solo con css. Una al ternativa es usar "absolute" en vez de "fixed" pero tu menu ya no quedará fijo y se desplazará con el scroll y esto no es lo que tu quieres.
Me sumo a tu consulta.

un saludo.

zoloquoki · #5 (**permalink**) 27/10/2009, 17:12

Es eso!! A ver si por ahi encuentro alguna información, o bien, si alguien sepa como resolverlo, se lo agredecería mucho.

de todos modos, muchas gracias cristian_cena! y si ves algo en relación a mi problema, aqui estaré.

saludos!

alexk · #6 (**permalink**) 28/10/2009, 21:20

no entiendo... se supone que con "position: fixed; " este se queda fijo... y bajando el scroll este se queda siempre alli... asi que no baja al miso tiempo sino que queda fijo...

no te vale con es? o quieres que tenga un efecto de desplazamiento?

Mikmoro · #7 (**permalink**) 29/10/2009, 00:55

Supongo que sólo con javascript podrás calcular que ha hecho tope en la pantalla para asignarle una posición fija. Con CSS no lo veo posible.

tistklehoff · #8 (**permalink**) 29/10/2009, 03:57

Echa un vistazo a esto:
http://www.softcomplex.com/docs/get_..._position.html

La única duda que me queda es de si esto sería posible incluirlo en una expresión de las de IE para conseguir el efecto deseado, aunque, claro, sólo funcionaría para IE.

Un saludo.

zoloquoki · #9 (**permalink**) 29/10/2009, 11:00

Hola, he estado mirando en muchas web's que contenga lo que quiero, y he encontrado el de apple store. Fijaos en el contenedor derecho, que al bajar, el contenedor empieza a bajar cuando topa con la barra de herramientas del navegador.

En caso de que no se te redireccione, le das a un producto a comprar, y saldrá la configuración que quieres añadir a tu producto donde te indica el precio total a pagar.

Acá va el enlace: applestore

He estado mirando su hoja de estilo, y por lo visto solo he encontrado los llamados "fixed", "z-index" y "top". AL poner el top=0, se me sube el contenedor arriba del todo. Espero que con el ejemplo del enlace, sepais como funciona exactamente.

mil gracias!

cristian_cena · #10 (**permalink**) 29/10/2009, 20:04

Hola zoloquoki, me atrevo a insistir en que para lograr ese efecto debes integrar CSS con alguna libreria de javascript. Lamento no poder ayudarte en este asunto, ya que recien estoy aprendiendo javascript y aún no domino ni el DOM ni ninguna librería. Mas puedo recomendarte que visites este http://www.sohtanaka.com/web-design-blog/ en el cual encontrarás muchos ejemplos de integracion css/javascript (jquery)

Saludos!

AlbertoGarcia · #11 (**permalink**) 29/10/2009, 22:25

Me ha dado curiosidad el tema y trasteando por el código del applestore y por la red me he enterado que que se consigue con el método scrollIntoView de JS. Información sobre el script y ejemplo de funcionamiento aquí y aquí en castellano.

Salud!