Jquery - Cómo detectar si los elementos se ocultan por un desbordamiento: oculto; ¿envase?

Question

Tengo este problema y todavía estoy en un nivel conceptual de comprensión, ¿cómo podemos detectar si un elemento dado está fuera del contenedor (un contenedor con desbordamiento: oculto; propiedad declarada);

Aquí está el contexto de lo que queremos:

imagen Vamos que son objeto de ratón de la libración 3:

Normalmente tenemos:

item 1 
item 2 
item 3 - sub 3.1 
     - sub 3.2 

Así, el sub 3.2 estará fuera del flujo y no ser visible, O (si usamos clearfix en el contenedor en lugar de overflow), se desplegará sobre otros contenidos de la página), para resolver esto, creemos que esta es una mejor solución, nuevamente, suponiendo que elemento 3 del mouse-hover:

item 1 
item 2 - sub 3.1 
item 3 - sub 3.2 

Para hacer esto, tal vez, deberíamos detectar si el elemento está fuera del flujo, y, es él, empujar todo hacia arriba X px;

Si este es un buen método para resolver esto, ¿cómo podemos detectar si un elemento está fuera del flujo?

Si este no es un buen enfoque, ¿puede por favor sugerir otro?

ps- estamos utilizando superfish como una solución de menú jquery.

Answer 1

Si simplemente desea mostrar todo lo que usted ha descrito se puede hacer eso con CSS con un position:relative y align:bottom o position:absolute con bottom:?px Sin embargo, a continuación, tendría que preocuparse acerca de las cosas que van a muy arriba.

Answer 2

Podría tener una solución jQuery rápida, su pregunta está etiquetada de esa manera, si necesita una solución pura de CSS o tomé el complemento incorrecto, podemos pensar en otra cosa ... Nunca usé Superfish yo mismo, pero lo compruebo el ejemplo de "estilo vertical" de este sitio: http://users.tpg.com.au/j_birch/plugins/superfish/

Entonces, cuando mueva el cursor sobre el elemento 3, ¿le gustaría ver el sub 3.1 en el nivel del ítem 1? Después de tomar un vistazo rápido en el código de este plugin creo que sólo hay que modificar showSuperfishUl() que tiene una línea que termina así:

.find('>ul:hidden').css('visibility','visible'); 

Suponiendo sus artículos y sandwiches son de la misma altura, y su sustitución por el contexto con $ (este), se podría añadir algo similar a estas líneas:

if($(this).parent().nextAll().length < $(this).children("li").length) // lower space < subs heights ? 
{ 
    var totalHeight=0; 
    $(this).parent().prevAll().each(function(index) 
    { 
     if(index < $(this).children("li").length) // without this you would have all subs at the level of item 1 
     { 
      totalHeight += $(this).outerHeight(true); // true for margins 
     } 
    }); 
    ... .css("top","-"+totalHeight+"px"); 
} 

usted tendría que configurar una página real para averiguar si funciona en un contexto real ... "top" probablemente no lo hará trabaje con este diseño relativo/float: left, pero en su "nivel conceptual" eso es casi todo.