Comunidad de diseño web y desarrollo en internet online

Un elemento sube hasta la parte superior del navegador y queda fijo

Citar            
MensajeEscrito el 30 Ene 2013 04:33 pm
Buenas tardes a tod@s

Alguien me podría remitir a algún tutorial donde se explique cómo hacer que un elemento que en principio no aparece en la parte superior del navegador, suba cuando hacemos scroll pero sólo hasta que alcanza el límite superior de la ventana de dicho navegador?

Para ilustrar mi pregunta os dejo este link:

http://www.routalempi.fi/

En él podemos ver como el menú principal se comporta de la manera que os digo.

No pido una explicación directa o un trozo de código porque supongo que será más complicado que eso, pero si me indicárais algún tutorial donde pueda aprender a hacerlo, sería genial.

Muchísimas gracias por adelantado!

Por zapiram

38 de clabLevel



Genero:Femenino  

firefox
Citar            
MensajeEscrito el 31 Ene 2013 10:03 am
Verán, para que no piensen que parto de cero, sé que al principio la posición del menú es absolute, y justo cuando al hacer scroll, este menú alcanza la parte superior del navegador, dicha posición cambia a fixed. Lo que no sé es cómo hacer que cambie...

Por zapiram

38 de clabLevel



Genero:Femenino  

firefox
Citar            
MensajeEscrito el 31 Ene 2013 01:55 pm
espero no te lleves una gran sorpresa pero eso se hace con javascript, seguramente con jquery, vas a tener que investigar algo mas que position absolute y fixed, para hacer eso, el objeto html, toma de referencia el offset top, que es la altura desde el marco de la ventana hasta el objeto, entonces cuando esta es igual osea 0 el objeto pasa a ser fixed y sigue a la pantalla, y despues a la inversa un proceso similar, saludos.

Por skaterseba

Claber

170 de clabLevel



 

chrome
Citar            
MensajeEscrito el 31 Ene 2013 01:57 pm
$(window).scroll(function(){
if($(window).scrollTop() > 563) {
$('#navigation').css('top', '0px');
$('#navigation').css('position', 'fixed');
}
else {
$('#navigation').css('position', 'absolute');
$('#navigation').css('top', '563px');
}
if($(window).scrollTop() > 620) {
$('#navigation').addClass('hovering');
} else {
$('#navigation').removeClass('hovering');
}
});

fijate si le encontras utilidad a esto saludos.

Por skaterseba

Claber

170 de clabLevel



 

chrome
Citar            
MensajeEscrito el 31 Ene 2013 05:01 pm
Muchísimas gracias skaterseba, he creado un js con este código, lo he vinculado y funciona perfectamente!!!

Sólo una curiosidad que me gustaría preguntarte: los '563px' son la posición inicial del navigation en el eje y, pero... ¿a qué hace referencia la cifra 620?

Gracias de nuevo!!!!

Por zapiram

38 de clabLevel



Genero:Femenino  

firefox
Citar            
MensajeEscrito el 31 Ene 2013 09:56 pm
em, si usaste esas cifras y te funco, habra sido casualidad, xq depende de la pantalla, de cada monitor, y el 620, es la condicion que tiene q cumplir la propiedad scrolltop de la ventana para agregarle la clase q propone el codigo, fijate que es la propiedad scrolltop o que valor devuelve, en la pagina de jquery, y despues vas a entender xq hace eso, saludos.

Por skaterseba

Claber

170 de clabLevel



 

chrome
Citar            
MensajeEscrito el 01 Feb 2013 10:13 am
Gracias skaterseba, había pensado que podía ser eso, pero al hacer la ventana del navegador más pequeña que 620, seguía (y sigue) funcionando :- )

En cualquier caso resolviste mi duda y me diste un gran punto de partida. Mil gracias!

Por zapiram

38 de clabLevel



Genero:Femenino  

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.