Ver Mensaje Individual
  #1 (permalink)  
Antiguo 23/06/2013, 10:46
zapiram
 
Fecha de Ingreso: enero-2007
Mensajes: 12
Antigüedad: 17 años, 11 meses
Puntos: 0
Fixed to absolute y posición de un elemento respecto al tamaño de ventana

Muy buenas a tod@s,

Ojalá alguien me puediera ayudar... Llevo muchos días ya dándole vueltas a esto y buscando información, pero no he podido solucionarlo... Me gustaría saber cómo puedo indicar en java que la posición de un elemento cambie sólo cuando la ventana del navegador tenga una resolución vertical menor a 737 px. Este es el enlace de prueba de la web: http://www.zapiram.es/zapiram_test/index3.html

El problema es el siguiente:

1º - Como se puede ver, la barra de menú comienza en una posición fija. Si se hace scroll hacia abajo, o lo que es lo mismo, se pulsa uno de los botones del menú, la barra de menú pasa a position': 'absolute'. Para conseguirlo el código en el documento js es el siguiente (y hasta aquí funciona bien):

$(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
});


2º - ¿Pero cómo puedo hacer que SÓLO en caso de que la resolución vertical de la ventana del navegador sea menor que la óptima, la barra de menú se fije abajo y no se pierda por la parte inferior? Lo intenté añadiendo el siguiente código a lo anterior:

$(window).scroll(function(e){ // Evento scroll de la ventana
if ($(this).scrollBottom() < originalTop ){ // cuando la posición de scroll de la ventana es menor que la posición top de la toolbar...
$el.css({'position': 'absolute', 'bottom': '0px'}); // ponerla en absolute.
}
}); // scroll


...pero esto está descartado, no funciona. Creo que es porque este segundo punto no depende ya de la posición del scroll si no del tamaño ocasional de la ventana. Es ese el problema? Alguien me podría orientar al respecto? Estaría eternamente agradecida, de verdad que lo he intentado hasta donde yo puedo llegar...

Muchas gracias de antemano.