Tengo un div que se fija a un lado de mi página web. Necesito que div estar centrado verticalmente. Logra fácilmente mediante el uso de CSS: (nota: la base de la altura del div es de 300px;)

#sidePanel { margin: -150px 0 0 0; top: 50%; position: fixed;}

El problema que estoy teniendo es este sidePanel div tiene mi navegación por el sitio. Cuando la navegación se abre para mostrar los elementos secundarios, que crece en altura, lo que perjudica el centrado. Necesito un poco de jQuery para volver a calcular la altura de la sidePanel div y aplicar el correspondiente margen negativo para mantener el div centrado. Aquí es el jQuery yo estaba jugando con:

$("#sidePanel").css("margin-top", $(this).outerHeight());

No he trabajado en el cálculo para establecer el negaitve margen a la mitad de la altura, pero esto no me da el valor de la altura que yo estoy buscando. Alguna sugerencia??

InformationsquelleAutor Mike Muller | 2010-11-10

2 Comentarios

  1. 6

    this no se refiere a la #sidePanel elemento en este caso, usted tendría que hacer con una función pasó a .css() como este:

    $("#sidePanel").css("margin-top", function() { return $(this).outerHeight() });

    O un .cada() llamada, como este:

    $("#sidePanel").each(function() {
      $(this).css("margin-top", $(this).outerHeight());
    });

    De caché o el selector, como este:

    var sp = $("#sidePanel");
    sp.css("margin-top", sp.outerHeight());
    • Gracias Nick, esto tiene sentido. ¿Cuál es la manera más fácil de hacer de este un número negativo??
    • sólo añadir un - 🙂 por ejemplo, -$(this).outerHeight()
  2. 0

    Pruebe a establecer el margen de la ventana de la altura de menos a la altura del div, todo dividido por dos. Que debe centrar verticalmente.

    • Soy nuevo en jQuery. ¿Cuál es la manera más fácil de agarrar a la altura de la ventana?

Dejar respuesta

Please enter your comment!
Please enter your name here