Estoy rehaciendo una web, y para ilustrar mejor mi problema este es el link de prueba: http://www.zapiram.es/zapiram_test/index3.html
Al principio el menú está en su lugar cuando se carga la página. Al hacer click en los apartados del menú, o al mover el scroll del navegador, la posición pasa de fixed a absolute y el menú se fija en la parte superior de la ventana del navegador. Si se pincha el logo y se vuelve a la portada, el menú vuelve a su posición original. Hasta ahí todo ok. La cuestión es que si se carga la página en un dispositivo con una resolución vertical menor, el menú queda oculto por la parte de abajo. No quiero subirlo porque siempre que sea posible creo que esa debe ser su posición, pero me gustaría que si la resolución del dispositivo es menor, el menú pasara a absolute fijándose en la parte inferior del navegador. Este es el código que tengo en el documento actual de java:
// JavaScript Document
$(function(){
var $el = $('#menu'), // La toolbar
originalTop = $el.offset().top; // Posición top original
$(window).scroll(function(e){ // Evento scroll de la ventana
if ($(this).scrollTop() > originalTop ){ // cuando la posición de scroll de la ventana es mayor que la posición top de la toolbar...
$el.css({'position': 'fixed', 'top': '0px'}); // ponerla en fixed.
} else {
$el.css({'position': 'absolute', 'top': originalTop}); // sino, ponerla en absolute.
}
}); // scroll
});
...Y esto es lo que he modificado (añadido) para conseguir lo que querría:
// JavaScript Document
$(function(){
var $el = $('#menu'), // La toolbar
originalTop = $el.offset().top; // Posición top original
$(window).scroll(function(e){ // Evento scroll de la ventana
if ($(this).scrollTop() > originalTop ){ // cuando la posición de scroll de la ventana es mayor que la posición top de la toolbar...
$el.css({'position': 'fixed', 'top': '0px'}); // ponerla en fixed.
} else {
$el.css({'position': 'absolute', 'top': originalTop}); // sino, ponerla en absolute.
}
if ($(this).scrollTop() < originalTop ){ // cuando la posición de scroll de la ventana es menor que la posición top de la toolbar...
$el.css({'position': 'fixed', 'bottom': '0px'}); // ponerla en absolute.
}
}); // scroll
});
...Pero no me ha funcionado
Es decir, cuando la resolución sea grande y lo permita, el menú debería aparecer donde está originalmente, que es la posición óptima; Si bajamos el scroll, debe quedarse arriba; Y si reducimos la ventana, debe pegarse a la parte inferior, todo esto con la idea de que siempre se vea.
La verdad es que ando perdida... Alguna idea u orientación? Estoy migrando desde flash y le pongo todo el empeño, pero muchas cosas se me escapan... Cualquier ayuda la agradecería muchísimo!
