Fixed to absolute y posición de un elemento respecto al tamaño de ventana

[zapiram]

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.

[rikimm]

para poder detectar la ventana o los px de tu navegador solo usa el .width() y pones las condicion o si no usa .css("width")

[zapiram]

Hola Rikimm,

Gracias por tu respuesta, esto es lo que he hecho, pero me temo que no me funciona... Seguramente es un problema de sintaxis, falta o sobra algo... Dime cómo lo ves y si detectas que he cometido algún error (o varios, que seguramente sí):


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


Gracias!!